附加到 div 时，滚动（）事件未触发

Question

<div class="row">
    <div class="col-md-8" id="homeview-story"></div>
    <div class="col-md-4" id="homeview-stream">
        <div id="log"></div>
    </div>
</div>

#homeview-story {
    overflow: scroll;  
    width: 72%; 
    height: 800px;
}
#homeview-stream { 
    overflow: scroll;  
    width: 28%; 
    height: 800px;
}

$(document).ready(function() {
    $('#homeview-story').scroll(function() {
        $("#log").append("<div>Handler for .scroll() called.</div>");
    });
});

目标是分别为homeview-story和homeview-stream实现无限滚动以加载各自的数据。滚动功能适用于窗口 obj ($(window).scroll)，但不适用于特定 div。

Answer 1

"scroll" 仅在元素实际可滚动/滚动时有效。如果你想要滚动数据而不考虑元素大小，如果你的浏览器支持，你可以使用"wheel"。

document.addEventListener("wheel", function(event) {
    console.log(event);
});

Answer 2

我遇到了和你一样的问题，我通过将我希望由scroll() function 触发的特定选择器放在$(window).scroll() function 中来解决它，如下所示：

$(window).scroll(function() {
    $('#homeview-story').scroll(function() {
        $("#log").append("<div>Handler for .scroll() called.</div>");
    });
});

我不确定此解决方案是否是解决此问题的正确方法，但对我来说效果很好。

Answer 3

问题在于，#homeview-story 没有溢出，所以它没有滚动。首先，它应该有一些大于滚动的内容，这在您的代码中是缺失的。

这是一个Demo，其中#logo 的高度大于它的父#homeview-stream，我们正在听它的滚动。

Answer 4

在#homeview-story 中放置一个内部div

<div class="row">
<div id="homeview-story">
    <div class="inner"></div>
</div>
<div id="homeview-stream"></div>
</div>

$(document).ready(function() {
   $('#homeview-story').bind('scroll',function() {
       var html = "<div id='log'>Hello</div>";
       $('#homeview-stream').append(html);
   });
});

希望这个demo 可以帮助您实现您想要实现的目标。

Answer 5

嗯，我看不出有什么不适合你。这是一个有效的fiddle

必须粘贴一些代码：

$(document).ready(function() {
$('#homeview-story').scroll(function() {
    $("#log").append("<div>Handler for .scroll() called.</div>");
});
});

Answer 6

您实际上是在#homeview-story div 内滚动吗？所以不是页面本身，因为 jquery scroll() 事件显然需要 (http://api.jquery.com/scroll/)

您是在引导 CSS 之后加载自定义 CSS 吗？否则，您的 div 可能仍未设置为溢出：滚动。嗯，再三考虑可能会因为您引用的是 ID。只是为了确定。