javascript - 除非页面移动，否则滚动事件不会触发

Question

当一个人从$(window).scrollTop == 0.

如果您有以下代码：

$(window).scroll(function(){
    console.log("scrolling")
});

在文档 < 窗口高度的页面上，该事件永远不会触发，因为$(window).scrollTop没有改变，但这并不意味着没有鼠标滚动输入。无论页面是否移动，我都希望在鼠标滚动时触发一个事件。

Answer 1

Seems like what you are looking for:

http://jsfiddle.net/n8eVQ/

$(document).on('mousewheel DOMMouseScroll MozMousePixelScroll', function(event, delta) {
    console.log('mousewheel');
    //you could trigger window scroll handler
    $(window).triggerHandler('scroll');
});

Other way is to capture scroll event on modern browsers which support event capturing phase (IE>8). This can be used for any dynamic element. As jQuery doesn't implement capturing phase, you have to use javascript addEventListener() method. Here an example implementing logic to get scrolling direction for a textarea:

document.addEventListener('scroll', function (event) {
    var $elm = $(event.target);
    if ($elm.is('textarea')) { // or any other filtering condition
        // do some stuff
        var direction = $elm.scrollTop() > ($elm.data('scrollTop') || 0) ? "down" : "up";
        $elm.data('scrollTop', $elm.scrollTop());
        console.log('scrolling', direction);
    }
}, true);

-DEMO-

Answer 2

document.addEventListener('DOMMouseScroll', callbackFunction, false);

火狐的解决方案；对于其他浏览器，请参阅@roasted 解决方案