附加到div时，scroll()事件未触发 [英] scroll() event not firing when attached to a div

问题描述

<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.

Objective is to implement infinite scrolling for both homeview-story and homeview-stream separately to load respective data. The scroll function works on the window obj ($(window).scroll) but is not working with specific div.

推荐答案

问题在于，#homeview-story 不会溢出，因此不会滚动.首先，它的内容应大于滚动的内容，这是代码中所缺少的.

The issue is that, #homeview-story isn't overflowing, So it isn't scrolling. First of all it should have some content larger than that for it to scroll, which is missing in your code.

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

Here's a Demo, where #logo has a height greater than it's parent #homeview-stream and we're listening to it's scroll.

这篇关于附加到div时，scroll()事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！