您的位置：首页 > Web前端 > JQuery

jQuery滚动事件之鼠标滚动到底部再加载数据

2017-01-08 11:10 495 查看

我们见过很多滚动事件：当滑动到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);
}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 鼠标滚动加载数据

相关文章推荐

新的分享

章节导航