window-到底刷新操作
2017-08-05 本文已影响0人
Arno_z
经常看到有的网站在拉到最底下的时候会刷新内容，那么这个是怎么实现的呢？
其实就是针对特定的内容区域做了一个scroll事件处理，下面的例子是在window上添加了一个scroll事件。
判断是否到底的操作是判断当前拖动的距离和当前视区的高度之和是否达到总的文档高度，达到即进行对应的操作
<!DOCTYPE html>
<html>
<head>
<title>Scroll</title>
<style type="text/css">
</style>
</head>
<body>
<h1>滚动测试</h1>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<p>xxx</p>
<script type="text/javascript">
window.onscroll = function sFunc(){
var topHeight = document.documentElement.scrollTop||document.body.scrollTop;
var totalHeight = document.body.clientHeight;
var viewHeight = window.innerHeight;
if(topHeight + viewHeight >= totalHeight){
var pNode = document.createElement("p");
var textNode = document.createTextNode(new Date() + "请求新数据");
pNode.appendChild(textNode);
document.body.appendChild(pNode);
}
}
</script>
</body>
</html>
对于window添加了onscroll事件，然后每次scroll的时候，由：
document.documentElement.scrollTop||document.body.scrollTop获取当前位置距离顶部的距离
document.body.clientHeight获取文档的总高度
window.innerHeight获取视区高度
（上面的选择是在chrome下测试的，关于获取不同的宽高度的操作可能对于不同浏览器有不同的API）
然后你往下拉的时候就可以看到对应的输出。
