Question

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

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

Answer 1

您可能忘记在ID为id选择器之前提供#，您需要在#之前提供id，即ulId

<击> 你可能需要在包含ul和scroll的div上绑定scroll事件。您需要使用div而不是ul

绑定事件
$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){ console.log('Event Fired'); });

<击>

修改

以上操作无效，因为滚动事件在用于事件委派的DOM中没有冒泡，请参阅此问题why doesn't delegate work for scroll?

但是使用现代浏览器＆gt; IE 8你可以通过其他方式做到这一点。您可以使用java脚本document.addEventListener使用事件捕获来执行此操作，而不是使用jquery进行委派，请参阅此tuturial中的冒泡和捕获工作。

<强> Live Demo

document.addEventListener('scroll', function (event) { if (event.target.id === 'idOfUl') { // or any other filtering condition console.log('scrolling', event.target); } }, true /*Capture event*/);

如果您不需要事件委派，那么您可以将scroll事件直接绑定到ul而不是通过document委派它。

<强> Live Demo

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

Answer 2

使用ajax加载ul后绑定滚动事件解决了这个问题。在我的发现中，$（document）.on（'scroll'，'＃id'，function（）{...}）无法正常工作，并在找到ajax加载后绑定了scroll事件。

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

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

希望它可以帮到某人。

Answer 3

使用VueJS我在这个问题中尝试了所有方法，但都没有效果。所以，如果有人正在努力奋斗：

mounted() {
  $(document).ready(function() { //<<====== wont work without this
      $(window).scroll(function() {
          console.log('logging');
      });
  });
},

Answer 4

另一种选择可能是：

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

参考：Here

Answer 5

$("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?

Answer 6

你可以在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）？

Answer 7

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

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

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

注意：如果很快发生这种情况，但在文档加载后没有发生，这很有用，否则它将毫无理由地使用客户端计算能力。

Answer 8

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

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

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

Jquery .on（'scroll'）在滚动时不触发事件

8 个答案: