日期:2014-05-16 浏览次数:20333 次
Google Reader 阅读器中,当向下拉动到尾部时,它会自动加载下面的部分。
下面的代码主要实现的是向下滚动。
?
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>无限滚动</title> <style type="text/css" media="screen"> ul {width:200px; height:100px; overflow-y:auto;} </style> </head> <body> <ul id="x"> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> </ul> <script type="text/javascript" charset="utf-8"> var i = 0; var $ = function (name) {return document.getElementById(name) }; var a = $('x'); a.onscroll = function () { if ( this.scrollHeight - this.clientHeight - this.scrollTop < 10) { console.log (i); var li = document.createElement('li'); li.innerHTML = "hello " + i++; this.appendChild (li); if (i >= 40) { this.onscroll = null return; } } } </script> </body> </html>?