我需要实现像onscroll down of page这样的face book实现加载更多结果。
外部Div和内部Div的样式

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

为此,我有两个div Inner和Outer,并附加了inline onscroll函数,用于Inner div。我可以在Inner div中滚动记录,而不必在页面第一次加载时看到滚动条,其中有10条记录。所以当我向下滚动到第7条记录时,我需要让服务器调用将10个结果追加到内部div。
找到第7条记录的滚动位置并触发服务器操作的最佳方法是什么?
既然网站是响应性的,那么Onscroll在所有设备上都能正常工作吗?或者其他更好的方法来满足需求?.

最佳答案

我也有类似的问题。
我现在使用以下内容(但我只支持Chrome):

var handleScroll = function(event) {

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

你基本上不关心第七条记录,只关心你的用户滚动到底部。
你还可以做些其他的事情:
从服务器中拉出时,添加一个小的动画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);

10-05 21:07
查看更多