javascript - 在 div 向下滚动时加载结果

Question

我需要实现类似于页面向下滚动加载更多结果的 face book 类型的实现。 外层和内层的样式

  .Outer{
      height: 1430px;
      margin-top: -12px;
      overflow: hidden;
      width: 99%;
    }
    .inner {
      height: 1435px;
      overflow-y: scroll;
      position: relative;
      width: 103%;
    }

为此，我有两个内部和外部 div，并为内部 div 附加了内联 onscroll 函数。我能够在内部 div 内滚动记录，而滚动条在第一次加载页面时有 10 条记录。因此，当我向下滚动到第 7 条记录时，我需要让服务器调用将另外 10 个结果附加到内部 div。

在第 7 条记录处找到滚动位置并触发服务器操作的最佳方法是什么？

既然网站是响应式的，Onscroll 在所有设备上都能正常工作吗？或者还有其他更好的方法来满足要求吗？

Answer 1

我遇到了类似的问题。

我现在使用以下(但我只支持 Chrome):

var handleScroll = function(event) {

        var container = event.target;
        if ((container.scrollTop + container.offsetHeight) 
             + 1 >= container.scrollHeight) { 
             ...
        }
}

您基本上不关心第 7 条记录，只关心您的用户正在滚动到底部。

您可以做的一些额外的事情:

• 为从服务器拉取时添加一点动画 img(如旋转的圆圈)。为此，我根据滚动方向在记录的顶部或底部添加了一个额外的 div。当服务器调用完成/出错时将其删除。

• 需要注意的是过多的 onscroll 调用，如果发生这种情况，您可能会收到过多的服务器调用。您可以使用计时器进行节流/反跳:

  document.getElementById('myid').onscroll = function(oEvent) {
      if (this.timer) {
          clearTimeout(this.timer);
      }
  
      this.timer = setTimeout(function() {
          this.handleScroll(oEvent);
      }.bind(this), 250);
  }.bind(this);