滚动ul 时未触发滚动事件。我正在使用 jQuery 版本 1.10.2。当我从 ajax 页面加载 ul 时，我无法使用 $('ulId').on('scroll', function() {}); 或其他实时方法。请帮助我找到解决方案。
$(document).on( 'scroll', '#ulId', function(){
console.log('Event Fired');
});
【问题讨论】：
您可能忘记在 id 之前为 id 选择器提供#，您需要在id 之前提供# 即ulId
$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
console.log('Event Fired');
});
编辑
上述方法不起作用，因为滚动事件不会在用于事件委托的 DOM 中冒泡，请参阅此问题 why doesn't delegate work for scrolling。
但是对于现代浏览器 > IE 8，您可以通过其他方式进行操作。您可以使用 javascript document.addEventListener 进行事件捕获，而不是使用 jquery 进行委托，第三个参数为 true；看看这个tuturial 中的冒泡和捕获是如何工作的。
document.addEventListener('scroll', function (event) {
if (event.target.id === 'idOfUl') { // or any other filtering condition
console.log('scrolling', event.target);
}
}, true /*Capture event*/);
如果您不需要事件委托，那么您可以直接将滚动事件绑定到 ul，而不是通过document 进行委托。
$("#idOfUl").on( 'scroll', function(){
console.log('Event Fired');
});
【讨论】：
$('#ulId').on('scroll',function(){ console.log('Event Fired'); })
$('ulId').on('scroll', function() {});，因为 UL 是从 Ajax 加载的
在 ul 加载后使用 ajax 绑定滚动事件解决了这个问题。在我的发现中 $(document).on( 'scroll', '#id', function () {...}) 不起作用，并且在发现 ajax 加载工作后绑定滚动事件。
$("#ulId").bind('scroll', function() {
console.log('Event worked');
});
您可以在移除或替换 ul 后取消绑定事件。
希望它可以帮助某人。
【讨论】：
.on('scroll... 而不是 .scroll(... 的全部目的是为了捕捉 DOM 的动态变化。
使用 VueJS，我尝试了这个问题中的所有方法，但都没有奏效。因此，如果有人在同样的情况下苦苦挣扎：
mounted() {
$(document).ready(function() { //<<====== wont work without this
$(window).scroll(function() {
console.log('logging');
});
});
},
【讨论】：
【讨论】：
$("body").on("custom-scroll", ".myDiv", function(){
console.log("Scrolled :P");
})
$("#btn").on("click", function(){
$("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');
listenForScrollEvent($(".myDiv"));
});
function listenForScrollEvent(el){
el.on("scroll", function(){
el.trigger("custom-scroll");
})
}
看到这篇文章 - Bind scroll Event To Dynamic DIV?
【讨论】：
我知道这是很老的东西，但我解决了这样的问题： 我有父子元素是可滚动的。
if ($('#parent > *').length == 0 ){
var wait = setInterval(function() {
if($('#parent > *').length != 0 ) {
$('#parent .child').bind('scroll',function() {
//do staff
});
clearInterval(wait);
},1000);
}
我遇到的问题是我不知道孩子何时加载到 DOM，但我每秒钟都在检查它。
注意：如果它很快发生但不是在文档加载后立即发生，这很有用，否则它将无缘无故地使用客户端的计算能力。
【讨论】：
您能否在加载ajax 之前将#ulId 放置在文档中（使用css display: none;），或者将其包装在包含div 中（使用css display: none;），然后在ajax 期间加载内部html页面加载，这样滚动事件将链接到 ajax 之前已经存在的 div？
那么你可以使用：
$('#ulId').on('scroll',function(){ console.log('Event Fired'); })
显然用可滚动 div 的实际 id 替换 ulId。
然后设置css display: block;加载时在#ulId（或包含div）上？
【讨论】：
我刚刚解决了页面加载后不会立即出现可滚动元素的问题：
$(document).ready(function () {
var checkIt = setInterval(function (){
if($('body').find('.scrollable-wrapper').length > 0){
clearInterval(checkIt);
jQuery('.scrollable-wrapper').on('scroll', function () {
console.log(1)
});
}
},100)
});
发现元素存在后，停止间隔，触发事件监听。
【讨论】：