Jquery .on('scroll') 滚动时不触发事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19375636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery .on('scroll') not firing the event while scrolling
提问by ABHILASH SB
Scroll event is not firing while scrolling the ul. I'm using jQuery version 1.10.2. As I'm loading the ulfrom an ajax page, I couldn't use $('ulId').on('scroll', function() {});or other live methods. Please help me to find a solution.
滚动ul. 我使用的是 jQuery 1.10.2 版。当我ul从 ajax 页面加载时，我无法使用$('ulId').on('scroll', function() {});或其他实时方法。请帮我找到解决办法。
$(document).on( 'scroll', '#ulId', function(){
console.log('Event Fired');
});
回答by Adil
You probably forgot to give #before id for id selector, you need to give #before idie is ulId
你可能忘记#在 id 之前给 id 选择器，你需要#在idie之前给ulId
You problably need to bind scroll event on div that contains the ul and scrolls. You need to bind the event with div instead of ul
您可能需要在包含 ul 和滚动条的 div 上绑定滚动事件。您需要使用 div 而不是绑定事件ul
$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
console.log('Event Fired');
});
$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
console.log('Event Fired');
});
Edit
编辑
The above would not work because the scroll event does not bubble up in DOM which is used for event delegation, see this question why doesn't delegate work for scroll?
以上不起作用，因为滚动事件不会在用于事件委托的 DOM 中冒泡，请参阅此问题为什么不委托滚动工作？
But with modern browsers > IE 8 you can do it by other way. Instead of delegating by using jquery you can do it using event capturing with java script document.addEventListener, with the third argument as true; see how bubbling and capturing work in this tuturial.
但是对于现代浏览器 > IE 8，您可以通过其他方式做到这一点。除了使用 jquery 进行委托，您还可以使用 java 脚本的事件捕获来完成document.addEventListener，第三个参数为true；在本教程中了解冒泡和捕获是如何工作的。
document.addEventListener('scroll', function (event) {
if (event.target.id === 'idOfUl') { // or any other filtering condition
console.log('scrolling', event.target);
}
}, true /*Capture event*/);
If you do not need event delegation then you can bind scroll event directly to the ul instead of delegating it through document.
如果您不需要事件委托，那么您可以将滚动事件直接绑定到 ul 而不是通过document.
$("#idOfUl").on( 'scroll', function(){
console.log('Event Fired');
});
回答by ABHILASH SB
Binding the scroll event after the ul has loaded using ajax has solved the issue. In my findings $(document).on( 'scroll', '#id', function () {...}) is not working and binding the scroll event after the ajax load found working.
在使用 ajax 加载 ul 后绑定滚动事件已经解决了这个问题。在我的发现中，$(document).on('scroll', '#id', function () {...}) 在 ajax 负载发现工作后不起作用并绑定滚动事件。
$("#ulId").bind('scroll', function() {
console.log('Event worked');
});
You may unbind the event after removing or replacing the ul.
您可以在删除或替换 ul 后解除绑定事件。
Hope it may help someone.
希望它可以帮助某人。
回答by juliangonzalez
Using VueJS I tried every method in this question but none worked. So in case somebody is struggling whit the same:
使用 VueJS 我尝试了这个问题中的所有方法，但都没有奏效。因此，万一有人也在苦苦挣扎：
mounted() {
$(document).ready(function() { //<<====== wont work without this
$(window).scroll(function() {
console.log('logging');
});
});
},
回答by MatayoshiMariano
回答by vipin8169
$("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");
})
}
see this post - Bind scroll Event To Dynamic DIV?
看到这篇文章 - 将滚动事件绑定到动态 DIV？
回答by Riiwo
I know that this is quite old thing, but I solved issue like that: I had parent and child element was scrollable.
我知道这是很老的事情，但我解决了这样的问题：我的父元素和子元素是可滚动的。
if ($('#parent > *').length == 0 ){
var wait = setInterval(function() {
if($('#parent > *').length != 0 ) {
$('#parent .child').bind('scroll',function() {
//do staff
});
clearInterval(wait);
},1000);
}
The issue I had is that I didn't know when the child is loaded to DOM, but I kept checking for it every second.
我遇到的问题是我不知道孩子何时被加载到 DOM，但我每秒钟都在检查它。
NOTE:this is useful if it happens soon but not right after document load, otherwise it will use clients computing power for no reason.
注意：如果它很快发生但不是在文档加载后立即发生，这很有用，否则它将无缘无故地使用客户端的计算能力。
回答by IIIOXIII
Can you place the #ulId in the document prior to the ajax load (with css display: none;), or wrap it in a containing div (with css display: none;), then just load the inner html during ajax page load, that way the scroll event will be linked to the div that is already there prior to the ajax?
您可以在ajax加载之前将#ulId放在文档中（使用css display: none;），或者将其包装在一个包含div中（使用css display: none;），然后在ajax页面加载期间加载内部html，这样滚动事件将链接到 ajax 之前已经存在的 div？
Then you can use:
然后你可以使用：
$('#ulId').on('scroll',function(){ console.log('Event Fired'); })
obviously replacing ulId with whatever the actual id of the scrollable div is.
显然，将 ulId 替换为可滚动 div 的实际 ID。
Then set css display: block; on the #ulId (or containing div) upon load?
然后设置css display:block; 加载时在#ulId（或包含div）上？
