当没有其他 div 滚动时滚动 div答案

【问题标题】：Scroll div when no other div is scrolled当没有其他 div 滚动时滚动 div
【发布时间】：2014-03-06 18:53:48
【问题描述】：

我已经设置了jsFiddle 来展示我想要实现的目标。

我有两个divs（可以多于两个，但这是简单的设置），其大小与父窗口相同，因此<body> 永远不会滚动。

我想将一个事件侦听器绑定到window.scroll，这样如果没有其他div 滚动（没有滚动），则.mainContent 滚动。

例如，如果我在 .sidebar 上滚动，只需滚动侧边栏。但是如果我的光标在右边缘并且我用鼠标滚轮滚动，那么.mainContent 应该滚动，就好像正文溢出了一样。

我解释清楚了吗？

我的问题是如何检测当我旋转鼠标滚轮时是否没有滚动其他元素，以便在这种情况下滚动.mainContent。

【问题讨论】：

你想让两个 div 在鼠标滚轮上滚动吗？
好吧，告诉我如果我做对了，你只希望光标所在的 div 滚动，而不是滚动其他，对吧？
不，只有一个。有时侧边栏不能滚动，有时会。当侧边栏可滚动时，滚动侧边栏，但当它不是并且我滚动侧边栏时，只需滚动 .mainContent。
我想检测我有光标的元素是否滚动，如果没有滚动.mainContent
@Mpa4Hu 我会尝试根据我所理解的做出一个小提琴。稍后检查答案

标签： javascript jquery html css scroll

【解决方案1】：

试试这个：

$(window).bind('mousewheel', function (event) {
    var isHover = $('.mainContent').is(':hover');

    if (!isHover) {
        $('.sidebar').scrollTop($('.sidebar').scrollTop() - event.originalEvent.wheelDeltaY);
    }
});

http://jsfiddle.net/bradleytrager/qPjs8/

【讨论】：

嗯，就是这样，但这个解决方案有一些东西，因为我首先摆脱了身体溢出。你看，当我滚动元素并且这个元素停止滚动时，我不希望其他元素滚动。当我只是分层滚动（其他 div 滚动也是）时，这也有一些奇怪的行为
@A.Wolff 这是跨浏览器解决方案吗？您可以将此作为答案提交吗？
@Mpa4Hu 应该是跨浏览器（IE8 除外，但它来自鼠标滚轮事件，与处理程序内的代码逻辑无关），如果它符合您的需要，您应该接受这个答案，因为我的 jsfiddle 只是对此答案的改编。编辑：但是你也许应该编辑这个答案以满足您的需求
好吧，这种方法解决了我的问题，除了有些时候.scrollable will not be scrollable 并且在这种情况下我想滚动 .mainContent >.
@BradleyTrager 如果没有滚动怎么办，我的意思是如果我将鼠标滚轮旋转到.mainContent 和.sidebar 之外会怎样。我仍然希望.mainContent 滚动

【解决方案2】：

Check this fiddle。适用于大多数浏览器：

//Swap values of the below two variables if needed
var scrollDiv1=$('.mainContent'),
    scrollDiv2=$('.sidebar');

var s=0;
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
$(window).bind(mousewheelevt, function(e){
    if(s==0)
    {
    var evt = window.event || e;
    evt = evt.originalEvent ? evt.originalEvent : evt;             
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;
    if(delta > 0) {
        scrollDiv1.stop()
        .animate({scrollTop :scrollDiv1.scrollTop()-100},'linear');
    }
    else{
        scrollDiv1.stop()
        .animate({scrollTop :scrollDiv1.scrollTop()+100},'linear');
    }
    }
    s=0;
});

scrollDiv2.bind(mousewheelevt, function(e){
    s=1;
});

要包含wheel 将变量（mousewheelevt）值更改为：

var mousewheelevt = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers
          document.onmousewheel !== undefined ? "mousewheel" : // Webkit + IE
          "DOMMouseScroll"; // Remaining (Previous firefox versions)

【讨论】：

我稍后使用命名空间解除绑定此事件，如下所示：$(window).bind('mousewheel.content', function (e) {})。所以var mousewheelevt = "onwheel" in document.createElement("div") ? "wheel" : document.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll"; mousewheelevt = mousewheelevt + '.content' 可以正常工作吗？

【解决方案3】：

感谢大家的回答。不幸的是，您的回答对我来说还不够，因为它们仅解决了一个可滚动区域的问题。但是.sidebar 不仅可以滚动，而且可以有模态框之类的东西。我们可以按照@A.Wolf 的建议使用.scrollable 类重新制作它，但我仍然认为我的情况下我提供了更好的解决方案。

再次感谢大家的回答，这帮助我思考我真正需要什么以及我真正的问题是什么。

$(window).bind('mousewheel', function (event) {
    if($(event.target).is('body')) {
        $('.mainContent').scrollTop($('.mainContent').scrollTop() - event.originalEvent.wheelDeltaY);
    }
});

这是基本功能，当然如果有人决定使用这个，你需要做这个跨浏览器。正如@Zword 建议的那样

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
$(window).bind(mousewheelevt, function(e){

但在我写这个之前，我想进一步研究一下，因为 Firefox 建议可以使用 DOMMouseScroll is not stable too. Wheel 事件来代替。

【讨论】：