Question

我有一个包含一些滚动溢出内容的固定DIV。我想开始学习滚动，视差等...首先，我需要能够检测用户是否滚动这个DIV。

我创建了这段代码，根本没有出现警告：

$(document).on('scroll','.contentPanel',function(){
   alert('YIKES!');
});

我也尝试了各种变体：

$('.contentPanel').parent().on('scroll','.contentPanel',function(){
   alert('YIKES!');
});

这个.contentpanel不是初始DOM的一部分，为了检查这个，我已经成功测试了这个函数（这意味着它能够检测到它的点击而不是滚动）：

$(document).on('click','.contentPanel',function(){
   alert('dlick');
});

但直接事件不适用于我的文档，例如.scroll或.click

Answer 1

鼠标滚轮事件在浏览器中有所不同，以下是获取正确事件的示例。

var mouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x

if (document.attachEvent) { //if IE (and Opera depending on user setting) 
    document.attachEvent("on"+mouseWheelEvent, function(e) {
        var event = window.event || e;
    });
} else if (document.addEventListener) { //WC3 browsers 
    document.addEventListener(mouseWheelEvent, function(e) {
        var event = window.event || e;
    }, false);
}

你可能想看看我之前回答的这个问题：Scrolling a Div from Anywhere

修改

var mouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x if (document.attachEvent) { //if IE (and Opera depending on user setting) document.attachEvent("on"+mouseWheelEvent, scrollHandler); } else if (document.addEventListener) { //WC3 browsers document.addEventListener(mouseWheelEvent, scrollHandler, false); } function scrollHandler(e) { if( $('.contentPanel').is(':hover') ) { alert('whatup'); } }

这很好用，jsFiddle：http://jsfiddle.net/nyCKE/4767/

Answer 2

试试这个：

http://jsfiddle.net/StephanWagner/nyCKE/4765/

$('.contentPanel').scroll(function () {
    alert('YIKES!');
});

当滚动对象不是初始DOM的一部分时，滚动事件不会执行

2 个答案: