滚动事件处理，例如Twitter和Facebook

Question

我一直试图将scroll事件绑定到页面上的元素，并在滚动时加载Twitter或Facebook这样的更多内容。

HTML

<div id="main-content">
    <ul class="event-list big row" id="event-list">
    ...
    </ul>
</div>

CSS

#main-content {
    width: 984px;
    overflow: visible;
    margin: 0 auto;
    color: #101010;
    width: 974px;
    padding: 10px 0 7px 0;
}
#main-content .event-list.big {
   width: 1080px;
   padding: 0 0 20px 0;
}

JS代码

$('#event-list').scroll(function() {
    var curScroll = $(this)[0].scrollTop,
        maxScroll = $(this)[0].scrollHeight - $(this).height();

    console.log(curScroll, ' :: ', maxScroll);

    if ((curScroll >= maxScroll - 200) && !loading) {
        loading = true;

        $(this)[0].scrollTop = curScroll;

        $('.loading').fadeIn('fast');

        if (page <= $('.page').length) {
            loadMore();
        }
    }
});

当我滚动scroll事件时，即使它没有打印出来，也不会触发curScroll和maxScroll。

什么可能根本导致问题，也许CSS样式错误或我的js代码错误？

Answer 1

这是一个我相信您希望通过滚动事件触发的工作示例。通过设置“溢出：滚动”将div用作可滚动区域。注意：仅当列表在初始加载时足够长时，您才会获得滚动事件。 （请参阅main-content上的height属性。我将让ajax加载给您。：）

Answer 2

请参见http://api.jquery.com/scroll/

Answer 3

当您设置身体的css属性时，例如