一個index.html頁面，一個scroll.js即可實現(xiàn)簡單的功能
index.html頁面代碼：
<!DOCTYPE html>
<html>
<head lang="en">
? ? <meta charset="UTF-8">
? ? <title>滾動條測試</title>
? ? <style>
? ? ? ? .parent_div {
? ? ? ? ? ? width: auto;
? ? ? ? ? ? height: auto
? ? ? ? }
? ? </style>
</head>
<body? id="myScrollspy" >
<div class="parent_div">
? ? <ul id="my_list">
? ? ? ? <li>滑動鼠標滾輪列出所有id</li>
? ? </ul>
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="scroll.js"></script>
<script src="jquery.nicescroll.js"></script>
</body>
</html>
scroll.js代碼如下：
(function ($) {
? ? var pos = 0;
? ? var LIST_ITEM_SIZE = 56;
? ? //滾動條距底部的距離
? ? var BOTTOM_OFFSET = 0;
? ? var page = 1
? ? var total = 10
? ? var display = 0
? ? createListItems();
? ? $(document).ready(function () {
? ? /* 美化滾動條 */
? ? ? ? $('body').niceScroll({
? ? ? ? cursorcolor: '#6E6E7D', ////#6E6E7D 光標顏色
? ? ? ? touchbehavior: false, //使光標拖動滾動像在臺式電腦觸摸設(shè)備
? ? ? ? cursoropacitymin: 0,
? ? ? ? cursoropacitymax: 1, //改變不透明度非常光標處于活動狀態(tài)（scrollabar“可見”狀態(tài)），范圍從1到0
? ? ? ? cursorwidth: '5px', ////像素光標的寬度
? ? ? ? cursorborder: '1px solid #424242', // 游標邊框css定義
? ? ? ? cursorborderradius: '5px', //以像素為光標邊界半徑
? ? ? ? autohidemode: true //是否隱藏滾動條
? ? })
? ? ? ? // 實現(xiàn)滾動加載
? ? ? ? $(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();
? ? ? ? var result =getPageInfo({type:'emergenciesList',page:page,size:50},function(data){
? ? ? ? display += 50
? ? ? ? console.log(display)
? ? ? ? if(data.success && data.result){
? ? ? ? total = data.result.total
? ? ? ? page +=1
? ? ? ? var datas = data.result.data
? ? ? ? for (var i = datas.length - 1; i >= 0; i--) {
? ? ? ? var liItem = mydocument.createElement("li");
? ? ? ? ? ? liItem.innerHTML = "id為" + datas[i].id;
? ? ? ? ? ? docFragments.appendChild(liItem);
? ? ? ? };
? ? ? ? } else {
for (var i = pos; i < pos + LIST_ITEM_SIZE; ++i) {
? ? ? ? ? ? var liItem = mydocument.createElement("li");
? ? ? ? ? ? liItem.innerHTML = "id為 " + i;
? ? ? ? ? ? docFragments.appendChild(liItem);
? ? ? ? }
? ? ? ? pos += LIST_ITEM_SIZE;
? ? ? ? }
? ? ? ? mylist.appendChild(docFragments);
? ? })
? ? }
? ? /*
? ? * 異步加載調(diào)用后臺
? ? */
? ? function getPageInfo(data,callbackfun){
? ? try {
? ? $.ajax({
? ? ? type: 'post',
? ? ? url: 'http://localhost:8008/api/data/getPage' + '?temp=' + Math.random(),
? ? ? async: true,
? ? ? cache: false,
? ? ? contentType: 'application/json',
? ? ? data: typeof data === 'string' ? data : JSON.stringify(data),
? ? ? dataType: 'JSON',
? ? ? success: function (msg) {
? ? ? ? callbackfun(msg)
? ? ? },
? ? ? error: function (msg) {
? ? ? ? callbackfun({success: false, msg: '錯誤！'})
? ? ? }
? ? })
? ? }catch (e) {
? console.log('錯誤提示', e.message)
? callbackfun({success: false, msg: '錯誤！'})
}
? ? }
})(jQuery);
