Question

我已设置jsFiddle来展示我想要达到的目标。

我有两个div s（可能有两个，但这是简单的设置），父窗口的大小，所以<body>永远不会滚动。

我想将事件监听器绑定到window.scroll，这样如果没有滚动其他div（没有滚动任何内容），则滚动.mainContent。

例如，如果我在.sidebar滚动，只需滚动侧边栏。但是如果我的光标在右边缘并且我用鼠标滚轮滚动，那么.mainContent应该滚动，好像身体已经溢出。

我能解释清楚吗？

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

Answer 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/

Answer 2

在大多数浏览器中

Check this fiddle .Works：

//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)

Answer 3

感谢大家的回答。不幸的是，你的答案对我来说还不够，因为他们只解决了一个可滚动区域的问题。但是.sidebar不仅可以滚动，而且可以有模态和类似的东西。我们可以用@ {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事件代替。

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

3 个答案: