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

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

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

Answer 3

你真的在＃homeview-story div里面滚动吗？所以不是页面本身，因为jquery scroll（）事件明显需要（http://api.jquery.com/scroll/）

您是否在引导CSS之后加载自定义CSS？否则你的div可能仍然没有设置为溢出：滚动。嗯，第二个想到它可能会因为你引用一个ID。只是为了确保那时。

Answer 4

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

必须粘贴一些代码：

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

Answer 5

在＃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 6

我遇到了和你一样的问题，我通过把scroll() function内的$(window).scroll() function触发的特定选择器解决了这个问题：

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

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

附加到div时，scroll（）事件不会触发

6 个答案: