上網時經常會看到許多酷炫的網頁，其中給我印象較深刻的是滑鼠滾動到頁面底部時會自動載入內容，一直都很好奇是怎麼樣做到的，於是自己也嘗試著寫了一下。
先上個完整**吧：
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
script
src="js/jquery.min.js"
>
script
>
<
style
>
divli
style
>
head
>
<
body
id="container"
>
<
div>lfjakjflkf
div>
<
script
>
//獲取滾動條當前的位置
function
getscrolltop()
else
if(document.body)
return
scrolltop;
} //獲取當前可視範圍的高度
function
getclientheight()
else
return
clientheight;
} //獲取文件完整的高度
function
getscrollheight()
window.onscroll
=function
() else
; xhr.open(
"get",
"load.json",
true
); xhr.onreadystatechange
=function
()) }
}xhr.send(); }}
script
>
body
>
html
>
load.json檔案的**如下：
]}
好了，下面來分析下這段**，其實先是頁面載入完畢會有一部分內容，然後滑動滾動條，一直到文件可視區域高度+滾動條距離文件頂部高度 等於 文件總高度時 非同步載入乙個json檔案的內容。
這裡有幾個要點：1、獲取文件的完整高度。2、獲取文件可視區域高度。3、獲取滾動條距離文件頂部的高度。4、判斷滾動條是否滑動到頁面底部，如到了底部則非同步載入json檔案。5、需要將非同步載入的json檔案渲染到頁面中，由於獲取到的是json字串，因此需要使用json.parse()方法先將其轉換為json物件，才可以使用$.each()方法進行遍歷，然後逐個獲取資料。
其實我這裡獲取文件高度、可視區域高度以及滾動條距離文件頂部高度使用js寫的，相對要複雜點，如果用jquery寫的話，會是很簡潔的，如
獲取文件完整高度，可以使用$(document).height();
獲取文件可視區域高度，可以使用$(window).height();
獲取滾動條距離文件頂部的高度，可以使用$(window).scrolltop()。
div滾動到底部自動載入
重點 一開始一直進不了滾動事件，最後發現是因為需要滾動元素的父元素沒有設定overflow hidden 記住了！如果不設定fixed的話，就要設定元素固定的高！css contentboxhtml contentbox schooldeatl div loaddiv style width 100...
ListView滾動到底部自動載入更多
1.自己寫乙個loadingview,有2種狀態 1種是載入時的顯示，一種是載入失敗 網路超時 時候的重發介面 2.將loadingview放到listview的footview中 3.在baseadapter的getview中判斷position是不是最後乙個.例如當前有20條記錄，positio...
滾動條滾動到頁面底部繼續載入
這個例項應該說可以很簡單，直接使用jquery的方法來處理也是可以的。但本文底層使用原生的js來處理，遇到一些小知識點可以分析一下也算有所得。原理很簡單，就是為window新增乙個scroll事件，瀏覽器每次觸發scroll事件時判斷是否滾動到了瀏覽器底部，如果到了底部則載入新資料。關鍵是計算滾動條...