78

滚动ul. 我正在使用 jQuery 版本 1.10.2。当我ul从 ajax 页面加载时，我无法使用$('ulId').on('scroll', function() {});或其他实时方法。请帮我找到解决方案。

$(document).on( 'scroll', '#ulId', function(){
    console.log('Event Fired');
});
4

8 回答 8

87

您可能忘记#在 id 之前给 id 选择器，您需要在ie#之前给idulId

您可能需要在包含 ul 和滚动条的 div 上绑定滚动事件。您需要使用 div 而不是 `ul` 绑定事件 
$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
    console.log('Event Fired');
});

编辑

上述方法不起作用，因为滚动事件不会在用于事件委托的 DOM 中冒泡，请参阅这个问题为什么不委托滚动工作。

但是使用现代浏览器 > IE 8，您可以通过另一种方式进行操作。您可以使用带有 javascriptdocument.addEventListener的事件捕获来代替使用 jquery 进行委派，第三个参数为true; 看看在这个教程中冒泡和捕获是如何工作的。

现场演示

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');
});
于 2013-10-15T07:36:49.410 回答
24

使用 ajax 加载 ul 后绑定滚动事件已解决该问题。在我的发现中 $(document).on( 'scroll', '#id', function () {...}) 不起作用，并且在发现 ajax 加载工作后绑定滚动事件。

$("#ulId").bind('scroll', function() {
   console.log('Event worked');
});

您可以在移除或替换 ul 后取消绑定事件。

希望它可以帮助某人。

于 2014-01-31T19:19:27.747 回答
20

使用 VueJS，我尝试了这个问题中的每一种方法，但都没有奏效。因此，如果有人在同样的情况下苦苦挣扎：

mounted() {
  $(document).ready(function() { //<<====== wont work without this
      $(window).scroll(function() {
          console.log('logging');
      });
  });
},
于 2017-02-06T22:35:08.703 回答
4

另一种选择可能是：

$("#ulId").scroll(function () { console.log("Event Fired"); })

参考：这里

于 2016-08-27T21:14:56.090 回答
2 
$("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");
    })
}

看到这篇文章 - 将滚动事件绑定到动态 DIV？

于 2016-01-29T04:29:42.063 回答
1

我知道这是很老的事情，但我解决了这样的问题：我的父元素和子元素是可滚动的。

   if ($('#parent > *').length == 0 ){
        var wait = setInterval(function() {
            if($('#parent > *').length != 0 ) {
                $('#parent .child').bind('scroll',function() {
                  //do staff
                });
                clearInterval(wait);
            },1000);
        }

我遇到的问题是我不知道孩子何时加载到 DOM，但我每秒都在检查它。

注意：如果它很快发生但不是在文档加载后立即发生，这很有用，否则它将无缘无故地使用客户端的计算能力。

于 2015-11-02T23:04:06.433 回答
0

您可以在ajax加载之前将#ulId放在文档中（使用css显示：无；），还是将其包装在包含div中（使用css显示：无；），然后在ajax页面加载期间加载内部html，这样滚动事件将链接到在 ajax 之前已经存在的 div 吗？

然后你可以使用：

$('#ulId').on('scroll',function(){ console.log('Event Fired'); })

显然用可滚动 div 的实际 id 替换 ulId 。

然后设置 css display: block; 加载时在#ulId（或包含div）上？

于 2013-10-15T07:40:23.673 回答
0

我刚刚解决了可滚动元素在页面加载后不会立即出现的问题：

$(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)
});

发现元素存在后，间隔停止，触发事件监听。

于 2021-06-26T08:26:25.293 回答