Question

js如何在页面滚动到一定位置时触发事件？

比如一个包含信息很多的页面，我想在页面第一次加载时，只读取一半的内容，当用户翻滚页面到达当前的最低端的时候（也可以说是一个标志点被显示的时候），触发一个事件去读取另一半的内容。

我想请教一下，这种情况如何触发事件？

Answer 1

要实现这样的效果你需要使用到 滚动条事件 以及 元素在文档中的绝对定位。

比如我加载了100条微博，第一百条微博这个块级元素为 myBlock ， 使用递归往上寻找父元素的方法求得myBlock在文档中的绝对位置：

function getTop(e)
{
var offset=e.offsetTop;
if(e.offsetParent!=null) //只要还有父元素,也就是当前元素不是根节点就继续往上累计元素的高度
offset+=getTop(e.offsetParent);
return offset;
}
var myBlockTop = getTop(myBlock);

获得了第100条微博的绝对高度后注册滚动条事件:window.addEventListener("scroll",function(){
if(document.body.scrollTop + (document.body.clientHeight || window.innerHTML) >= myBlockTop){
//当当前可视部分底部到达第100条微博的高度坐标时,进入这个if块
}
}

大概就这么实现,希望对您能有帮助

//----------------------------------------------

IE9以下对W3C标准支持得异常惨烈好像不支持那个window.addEventListener()得使用window.attachEvent('onscroll',function(){.......................});

反正思路是这样,你自己可以试试

Answer 2

一般是用屏幕高和页面高做计算得出目前位置的，不需要标志点的，用Jquery的话好像还有插件干这种事。

追问

其实我的需求没有那么复杂，就是比如我先加载了100条数据，然后在这100条数据的后面有一个标记，等到这个标记被显示的时候（也就是滚动到了这里），触发事件，这时候去读取剩下100条数据。
多谢了！我去找找插件