jQueryスクロールイベントのマウススクロール底部再ロードデータ
2331 ワード
多くのスクロールイベントを見たことがあります.リストの下部にスライドすると、データが新しくロードされます.
くだらないことは言わないで,直接コードをつけなさい.
以下はscrollです.htmlコード
以下はscrollです.jsコード
くだらないことは言わないで,直接コードをつけなさい.
以下は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);