經常看到有的網站在拉到最底下的時候會刷新內容，那么這個是怎么實現的呢？
其實就是針對特定的內容區域做了一個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）
然后你往下拉的時候就可以看到對應的輸出。
