我们见过很多滚动事件：当滑动到List列表底部时，再新加载数据。
废话不多说，直接上代码
以下是 scroll.html代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滚动条测试</title>
<style>
.parent_div {
width: auto;
height: auto
}
</style>
</head>
<body>
<div class="parent_div">
<ul id="my_list">
<li>This is list item origin.</li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="scroll.js"></script>
</body>
</html>
以下是scroll.js代码
(function ($) {
var pos = 0;
var LIST_ITEM_SIZE = 100;
//滚动条距底部的距离
var BOTTOM_OFFSET = 0;
createListItems();
$(document).ready(function () {
$(window).scroll(function () {
var $currentWindow = $(window);
//当前窗口的高度
var windowHeight = $currentWindow.height();
console.log("current widow height is " + windowHeight);
//当前滚动条从上往下滚动的距离
var scrollTop = $currentWindow.scrollTop();
console.log("current scrollOffset is " + scrollTop);
//当前文档的高度
var docHeight = $(document).height();
console.log("current docHeight is " + docHeight);
//当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度
//换句话说：（滚动条滚动的距离 + 窗口的高度 = 文档的高度） 这个是基本的公式
if ((BOTTOM_OFFSET + scrollTop) >= docHeight - windowHeight) {
createListItems();
}
});
});
function createListItems() {
var mydocument = document;
var mylist = mydocument.getElementById("my_list");
var docFragments = mydocument.createDocumentFragment();
for (var i = pos; i < pos + LIST_ITEM_SIZE; ++i) {
var liItem = mydocument.createElement("li");
liItem.innerHTML = "This is item " + i;
docFragments.appendChild(liItem);
}
pos += LIST_ITEM_SIZE;
mylist.appendChild(docFragments);
}
})(jQuery);