我需要实现像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);