AutoPager的简单实现-CSDN博客

Firefox有个自动翻页的插件AutoPager，使用起来非常的方便。腾讯微博也有相同的功能，当鼠标滑动到底部时会自动展开下一页，如下图所示：

展开后如下所示：

这个功能虽然比较小，但是实现起来是非常有意思的事情，我们可以选择多种方法达到目的。下面我介绍一种简单的实现方式。

1、首先移动滚动条会触发window.onscroll事件。

2、我们可以根据滚动条滚动时屏幕位置和页面底部的距离来判断是否需要翻页。

需要用到三个函数：

1、pageHeight：页面总高度。

2、windowHeight：屏幕高度。

3、ScollY：页面滚动的高度。

pageHeight减去windowHeight减去ScollY即为当前屏幕底部到页面底部的距离，如下图所示：

下面我们可以来实现这个功能了，我们设置一个阈值来设定页面加载的次数。

[javascript]view plaincopy 
   
 <!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>  