如何使用 JQuery .on() 捕捉滚动事件答案

【问题标题】：How to use JQuery .on() to catch the scroll event如何使用 JQuery .on() 捕捉滚动事件
【发布时间】：2012-05-24 09:40:38
【问题描述】：

我正在尝试使用 jQuery 中的 .on() 来捕获标签内的滚动事件。

所以这是我的解决方案：

div id='popup'
.fixedHeader 类是我尝试将其固定在 div 框架顶部的东西。

getScrollTop() 是一个返回最高值的javascript函数（有效）

$(document).on("scroll#popup", '#popup', function(){
   alert('scrolling');
   $(".fixedHeader").css("position", "relative");
   $(".fixedHeader").css("top", getScrollTop());
});

【问题讨论】：

标签： jquery css jquery-plugins

【解决方案1】：

正如@Venar303 所说，滚动不会冒泡，因此无法绑定到文档。

使用这个：

$('#popup').on('scroll', function() {});

而不是这个：

$(document).on('scroll', '#popup', function() {});

【讨论】：

【解决方案2】：

困惑在于“on()”是如何工作的。在 jQuery 中，当您说 $(document).on(xx, "#popup", yy) 时，只要 xx 事件到达文档但原始目标是“#popup”，您就会尝试运行 yyy。

如果文档没有收到 xx 事件，那么这意味着它没有冒泡！详细信息在 jQuery On 文档中，但是三个事件“load”、“error”和“scroll”不会在 DOM 中冒泡。

这意味着您需要将事件直接附加到接收它的元素上。 $("#popup").on(xx,yy);

【讨论】：

【解决方案3】：

事件只是scroll，而不是scroll#popup。

// http://ejohn.org/blog/learning-from-twitter
// Also, be consistent with " vs '
var $fixedHeader = $('.fixedHeader').css('position', 'relative');

$(document).on('scroll', '#popup', function() {
   console.log('scrolling'); // you *really* don't want to alert in a scroll
   $fixedHeader.css("top", getScrollTop()); 
});

【讨论】：

我有一个问题，该事件似乎没有被拾取......并且它没有写入控制台。我试图弄清楚是否可能是因为
标签是动态生成的。
我不认为这会导致问题 - 这是您使用 .on() 得到的一部分。
那么我不知道发生了什么，滚动事件似乎没有注册div标签，但它适用于窗口
试试$(window).on('scroll', '#popup', function() { ...
正如@Venar303 下面所说，$(document).on 不适用于滚动事件，您必须将其绑定到将引发滚动事件本身的对象。