Question

我需要实现facebook这样的实现，比如onscroll down of page加载更多结果。外部Div和内部div的样式

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

加载结果以向下滚动div

1 个答案: