AutoPager的简单实现.doc

AutoPager的简单实现 分类： 前端 2010-08-20 19:36 3603人阅读 评论(4) 收藏 举报 Firefox有个自动翻页的插件AutoPager，使用起来非常的方便。腾讯微博也有相同的功能，当鼠标滑动到底部时会自动展开下一页，如下图所示：展开后如下所示：这个功能虽然比较小，但是实现起来是非常有意思的事情，我们可以选择多种方法达到目的。下面我介绍一种简单的实现方式。1、首先移动滚动条会触发window.onscroll事件。2、我们可以根据滚动条滚动时屏幕位置和页面底部的距离来判断是否需要翻页。需要用到三个函数：1、pageHeight：页面总高度。2、windowHeight：屏幕高度。3、ScollY：页面滚动的高度。pageHeight减去windowHeight减去ScollY即为当前屏幕底部到页面底部的距离，如下图所示：下面我们可以来实现这个功能了，我们设置一个阈值来设定页面加载的次数。view plaincopy to clipboardprint?1. 2. 3. 4. 5. 6. 7. 8. 9. !-10. varUI=11. pageHeight:function()12. returndocument.body.scrollHeight|document.documentElement.scrollHeight13. ,14. windowHeight:function()15. vara=document.documentElement;16. returnself.innerHeight|a&a.clientHeight|document.body.clientHeight17. ,18. scrollY:function(a)19. varb=document.documentElement;20. if(a)21. varc=a.parentNode,22. e=a.scrollTop|0;23. if(a=b)e=UI.scrollY();24. returnc?e+UI.scrollY(c):e25. 26. returnself.pageYOffset|b&b.scrollTop|document.body.scrollTop27. 28. ;29. 30. varUtils=31. randomChar:function(l)32. varx=0123456789qwertyuioplkjhgfdsazxcvbnm;33. vartmp=;34. for(vari=0;il;i+)35. tmp+=x.charAt(Math.ceil(Math.random()*100000000)%x.length);36. 37. returntmp;38. 39. ;40. 41. varul=document.getElementById(ul-list);42. for(vari=0;i50;i+)43. varli=document.createElement(li);44. li.innerHTML=hfahe;45. ul.appendChild(li);46. 47. 48. varscoll_time=0;49. 50. window.onscroll=function()51. if(scoll_time10&UI.pageHeight()-UI.scrollY()-UI.windowHeight() 61. 62. 这样，我们就实现了AutoPager的功能。剩下一个很有意思的问题，window.onscroll按照道理会在滚动条的每次移动时触发，那么在我们设定触发的高度内（例子里是60个像素），它会不会频繁的调用我们的方法呢？例如像腾讯微博一样的Ajax调用会不会多次出现呢？又该如何解决此问题呢？读者有空的话可以思考思考。解决方案很简单，使用 setTim