// ————————————————————————————————
// 0。0
// ————————————————————————————————
// 早晨的空氣多么清晰，起來喝杯咖啡，吃點早點，休閑一下，上次在某個站點有滾動加載內容，況且星期天休息，手寫一份拿個大家分享研究下，不是jQuery的，習慣純代碼，
//准備成為古董了，hoho。
// ————————————————————————————————
// 1。 簡介
// ————————————————————————————————
//
// 有些站點通過window.onscroll 滾動來加載內容，而且為了每次能保證內容能完全加載，在內容區域下放置按鈕，本章共 2 節。
// 本小節 介紹 Javascript 滾動加載內容 之 window.onscroll 事件加載內容 , 突出其他站點內容滾動加載原理。
//
// ————————————————————————————————
// 2。 分析滾動原理（如果無滾動條，就無法觸發該事件，將由下小節介紹）
// ————————————————————————————————
//
// 當我們在滾動游覽器滾動條會觸發 window.onscroll 滾動事件，來加載內容
// 當我們拋棄所有限制代碼，那么就剩下 window.onscroll 滾動事件，就立即觸發加載內容
//
// window.onscroll -> 判斷每次滾動是否到頁面底部 -> 准備加載,初始化其他數據
//
// ————————————————————————————————
// 3。 知識點
// ————————————————————————————————
//
// new Object() 空項目；
// with 對的元素相同屬性縮碼
// window.onscroll 滾動事件
// document.createElement 創建元素
// parseInt 轉化為整型
// window.setTimeout window.clearTimeout 對稱關系，有設置set就要清除clear
// Math.max 比較大小，取最大值返回
// 兩個數字之間求余 使用“%”
// ————————————————————————————————
// 4。 代碼如下
// ————————————————————————————————
//
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>Javascript 滾動加載區域數據 （非jQuery）</title> 6 </head> 7 8 <body> 9 <table width="950" border="1" align="center" cellpadding="0" cellspacing="0" id="Table"> 10 <tr> 11 <td> </td> 12 <td> </td> 13 <td> </td> 14 </tr> 15 <tr> 16 <td> </td> 17 <td> </td> 18 <td> </td> 19 </tr> 20 <tr> 21 <td> </td> 22 <td> </td> 23 <td> </td> 24 </tr> 25 <tr> 26 <td> </td> 27 <td> </td> 28 <td> </td> 29 </tr> 30 <tr> 31 <td> </td> 32 <td> </td> 33 <td> </td> 34 </tr> 35 <tr> 36 <td> </td> 37 <td> </td> 38 <td> </td> 39 </tr> 40 <tr> 41 <td> </td> 42 <td> </td> 43 <td> </td> 44 </tr> 45 <tr> 46 <td> </td> 47 <td> </td> 48 <td> </td> 49 </tr> 50 <tr> 51 <td> </td> 52 <td> </td> 53 <td> </td> 54 </tr> 55 <tr> 56 <td> </td> 57 <td> </td> 58 <td> </td> 59 </tr> 60 <tr> 61 <td> </td> 62 <td> </td> 63 <td> </td> 64 </tr> 65 <tr> 66 <td> </td> 67 <td> </td> 68 <td> </td> 69 </tr> 70 <tr> 71 <td> </td> 72 <td> </td> 73 <td> </td> 74 </tr> 75 <tr> 76 <td> </td> 77 <td> </td> 78 <td> </td> 79 </tr> 80 <tr> 81 <td> </td> 82 <td> </td> 83 <td> </td> 84 </tr> 85 <tr> 86 <td> </td> 87 <td> </td> 88 <td> </td> 89 </tr> 90 <tr> 91 <td> </td> 92 <td> </td> 93 <td> </td> 94 </tr> 95 <tr> 96 <td> </td> 97 <td> </td> 98 <td> </td> 99 </tr> 100 <tr> 101 <td> </td> 102 <td> </td> 103 <td> </td> 104 </tr> 105 <tr> 106 <td> </td> 107 <td> </td> 108 <td> </td> 109 </tr> 110 </table> 111 112 <script> 113 var obj = new Object(); 114 obj.IsGetData = false; //是否存在數據加載 115 obj.Time = 0; //時間聲明(模擬) 116 obj.Index = 1; //編碼序號 117 obj.div=null; 118 //------------------------------- 119 // 名 稱：window.onscroll， 120 // 描 述：游纜器滾動事件 121 //------------------------------- 122 window.onscroll = function() { 123 if (uiIsPageBottom() && !obj.IsGetData) { 124 //狀態; 125 obj.IsGetData = true; 126 127 // 知識點：document.createElement 創建元素 128 // 加載進度條 129 var div = document.createElement("div"); 130 div.innerHTML = "正在加載數據中..." + obj.Index; 131 with(div.style) { 132 position = "absolute"; 133 left = "0px"; 134 height = "auto"; 135 width = "auto"; 136 fontSize = "12px"; 137 backgroundColor = "#666666"; 138 color = "#FFFFFF"; 139 // 知識點：parseInt 轉化為整型 140 // 對元素滾動定位處理 141 top = parseInt(document.documentElement.scrollTop, 10) + "px"; 142 } 143 document.body.appendChild(div); 144 obj.div = div; 145 //模擬Ajax加載; 146 obj.Time = window.setTimeout('GetAjaxData()', 3000); //模擬Ajax加載;使用Ajax數據注釋掉本行 147 } 148 if (obj.IsGetData) { 149 obj.div.style.top = parseInt(document.documentElement.scrollTop, 10) + "px"; 150 } 151 } 152 //------------------------------- 153 // 名 稱：GetAjaxData 154 // 描 述：模式Ajax加載數據 155 //------------------------------- 156 function GetAjaxData() { 157 // 知識點：cloneNode(true) 克隆元素 158 var table = document.getElementById("Table").cloneNode(true); 159 // 用於漸變內容區分，知識點： 兩個數字之間求余 使用“%” 160 table.style.backgroundColor= (obj.Index%2==0?"#999999":"#FFFFFF"); 161 document.body.appendChild(table); 162 //狀態 163 if (true) { 164 // 知識點： window.setTimeout window.clearTimeout 對稱關系，有設置set就要清除clear 165 // (時間長了耗費系統內存,有可能回導致IE崩潰,所以清除時間點,使用Ajax返回數據注釋掉本行) 166 if (obj.Time != 0) window.clearTimeout(obj.Time); 167 document.body.removeChild(obj.div); 168 } 169 obj.IsGetData = false; 170 obj.Index++; 171 } 172 //------------------------------- 173 // 名 稱：uiIsPageBottom 174 // 描 述：判斷是滾動到頁面底部 175 //------------------------------- 176 function uiIsPageBottom() { 177 var scrollTop = 0; 178 var clientHeight = 0; 179 var scrollHeight = 0; 180 if (document.documentElement && document.documentElement.scrollTop) { 181 scrollTop = document.documentElement.scrollTop; 182 } else if (document.body) { 183 scrollTop = document.body.scrollTop; 184 } 185 if (document.body.clientHeight && document.documentElement.clientHeight) { 186 clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; 187 } else { 188 clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; 189 } 190 // 知識點：Math.max 比較大小，取最大值返回 191 scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 192 if (scrollTop + clientHeight == scrollHeight) { 193 return true; 194 } else { 195 return false; 196 } 197 } 198 </script> 199 </body> 200 </html>