滚动事件处理，如 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 和 ma​​xScroll。

可能是什么导致了问题，可能是 CSS 样式错误或我的 js 代码错误？

Answer 1

这是一个我认为您想要触发滚动事件的工作示例。通过设置“溢出：滚动”将 div 用作可滚动区域。注意：只有在初始加载时列表足够长时，您才会收到滚动事件。 （请参阅 main-content 上的 height 属性。我将把 ajax 的加载留给你。:)

CSS

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

脚本

$(document).ready(function() {
            $('#main-content').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();
                  }
              }
            });
        });

HTML

<div id="main-content">
    <ul class="eventlist big row" id="event-list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
</div>

Answer 2

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

滚动事件仅在窗口、框架、iframe 和具有overflow: (scroll|auto) 的元素上触发，并且它们的内容必须大于可用的宽度/高度。所以我建议你添加

#event-list {
    overflow: auto;
}

如果你想监听用户滚动到特定元素的时间，你应该监听窗口的滚动事件，然后检查滚动坐标。

$(window).scroll(function() { /** ... **/ });

Answer 3

当你设置身体的 css 属性时

body {height: 100%;overflow: auto;} // or visible
Now, $(window).scroll();  will not work.

这将导致 jquery 滚动事件不起作用，因为 dom 不可滚动。因此，您必须删除溢出属性或将其设置为滚动。