Firefox有個自動翻頁的插件AutoPager，使用起來非常的方便。騰訊微博也有相同的功能，當鼠標滑動到底部時會自動展開下一頁，如下圖所示：
展開后如下所示：
這個功能雖然比較小，但是實現起來是非常有意思的事情，我們可以選擇多種方法達到目的。下面我介紹一種簡單的實現方式。
1、首先移動滾動條會觸發window.onscroll事件。
2、我們可以根據滾動條滾動時屏幕位置和頁面底部的距離來判斷是否需要翻頁。
需要用到三個函數：
1、pageHeight：頁面總高度。
2、windowHeight：屏幕高度。
3、ScollY：頁面滾動的高度。
pageHeight減去windowHeight減去ScollY即為當前屏幕底部到頁面底部的距離，如下圖所示：
下面我們可以來實現這個功能了，我們設置一個閾值來設定頁面加載的次數。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> </head> <body> <ul id="ul-list"></ul><mce:script type="text/javascript"><!--var UI = { pageHeight: function() { return document.body.scrollHeight || document.documentElement.scrollHeight }, windowHeight: function () { var a = document.documentElement; return self.innerHeight || a && a.clientHeight || document.body.clientHeight }, scrollY: function (a) { var b = document.documentElement; if (a) { var c = a.parentNode, e = a.scrollTop || 0; if (a == b) e = UI.scrollY(); return c ? e + UI.scrollY(c) : e } return self.pageYOffset || b && b.scrollTop || document.body.scrollTop }};var Utils = { randomChar: function(l) { var x = "0123456789qwertyuioplkjhgfdsazxcvbnm"; var tmp = ""; for(var i=0; i < l; i++) { tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length); } return tmp; }};var ul = document.getElementById('ul-list');for(var i = 0; i < 50; i++) { var li = document.createElement("li"); li.innerHTML = 'hfahe'; ul.appendChild(li);}var scoll_time = 0;window.onscroll = function() { if(scoll_time < 10 & UI.pageHeight() - UI.scrollY() - UI.windowHeight() < 60) { var ul_list = document.getElementById('ul-list'); var new_li = document.createElement('li'); new_li.innerHTML = Utils.randomChar(5); ul_list.appendChild(new_li); scoll_time++; }}// --></mce:script></body> </html>
這樣，我們就實現了AutoPager的功能。
剩下一個很有意思的問題，window.onscroll按照道理會在滾動條的每次移動時觸發，那么在我們設定觸發的高度內（例子里是60個像素），它會不會頻繁的調用我們的方法呢？例如像騰訊微博一樣的Ajax調用會不會多次出現呢？又該如何解決此問題呢？讀者有空的話可以思考思考。
- 前言
- AutoPager的簡單實現
- 利用CSS3特性巧妙實現漂亮的DIV箭頭
- IE9在Win7下任務欄新特性簡介
- 瀏覽器九宮格的簡單實現
- Raphael js庫簡介
- 使用CSS3構建Ajax加載動畫
- 用CSS3創建動畫價格表
- 用CSS3實現瀏覽器的縮放功能
- 用純CSS3實現QQ LOGO
- 用CSS3創建旋轉載入器
- 使用Javascript開發移動應用程序
- 用HTML5創建超酷圖像灰度漸變效果
- 使用CSS3創建文字顏色漸變(CSS3 Text Gradient)
- 僅用CSS創建立體旋轉幻燈片
- 如何創建跨瀏覽器的HTML5表單
- 用CSS3實現動畫進度條
- HTML5 Guitar Tab Player
- 奇妙的HTML5 Canvas動畫實例
- 談HTML5和CSS3的國際化支持
- 實現跨瀏覽器的HTML5占位符
- 前端開發必備工具：WhatFont Bookmarklet-方便的查詢網頁上的字體
- 使用HTML5和CSS3來創建幻燈片
- HTML5之美
- 如何使用HTML5創建在線精美簡歷
- 以小見大、由淺入深-談如何面試Javascript工程師
- 快速入門：HTML5強大的Details元素
- 用CSS3實現圖像風格
- HTML5視頻字幕與WebVTT
- 用純CSS3實現Path華麗動畫
- 用3個步驟實現響應式網頁設計
- 遇見CSS3濾鏡
- 關于CSS3濾鏡的碎念
- 用純CSS3繪制萌系漫畫人物動態頭像
- CSS3新的鼠標樣式介紹
- 用HTML5獻上愛的3D玫瑰
- 對HTML5 Device API相關規范的解惑
- 如何使用HTML5實現拍照上傳應用
- 2012第一季度國外HTML5移動開發趨勢
- HTML5新特性：范圍樣式
- 百度開發者大會-《用HTML5新特性開發移動App》PPT分享
- Chrome 19對于HTML5最新支持的動態：電池狀態API，全屏API，震動API，語音API
- 遇見Javascript類型數組(Typed Array)
- 用HTML5 Audio API開發游戲音樂
- 用HTML5實現人臉識別
- 用Javascript實現人臉美容
- Chrome 20對于HTML5最新支持的動態：顏色輸入，網絡信息API，CSS著色器
- 用HTML5實現手機搖一搖的功能
- 用HTML5實現iPad應用無限平滑滾動
- 用非響應式設計構建跨端Web App
- 了解SVG
- HTML5圖像適配介紹
- HTML5安全：內容安全策略（CSP）簡介
- HTML5安全：CORS（跨域資源共享）簡介
- 用CSS3 Region和3D變換實現書籍翻頁效果
- 談談移動App的思維誤區
- Chrome新特性：文件夾拖拽支持
- 《關注HTML5安全》
- HTML5安全風險詳析之一：CORS攻擊
- HTML5安全風險詳析之二：Web Storage攻擊
- HTML5圖像適配最新進展：響應式圖片規范草案
- HTML5移動Web App相關標準狀態及路線圖
- HTML5安全風險詳析之三：WebSQL攻擊
- Chrome引入WebRTC支持視頻聊天App
- HTML5安全風險詳析之四：Web Worker攻擊
- HTML5安全風險詳析之五：劫持攻擊
- HTML5安全風險詳析之六：API攻擊
- HTML5安全攻防詳析之七：新標簽攻擊
- 在iOS Safari中播放離線音頻
- 使用WebRTC實現遠程屏幕共享
- Firefox、Android、iOS遇見WebRTC
- HTML5光線傳感器簡介
- HTML5安全攻防詳析之八：Web Socket攻擊
- HTML5安全攻防詳析之完結篇：HTML5對安全的改進
- 激動人心！在網頁上通過語音輸入文字 - HTML5 Web Speech API介紹
- Web滾動性能優化實戰
- 用CSS3設計響應式導航菜單
- 用HTML5構建高性能視差網站
- 漫談@supports與CSS3條件規則
- HTML5下載屬性簡介
- 如何開發優秀的HTML5游戲？-迪斯尼《尋找奧茲之路》游戲技術詳解（一）
- 如何開發優秀的HTML5游戲？-迪斯尼《尋找奧茲之路》游戲技術詳解（二）
- 趨勢：Chrome為打包應用提供強大新特性
- 從HTML5移動應用現狀談發展趨勢
- 基于HTML5的Web跨設備超聲波通信方案