範例:
京東手機版頁面產品清單
先定義頁面捲動事件 scroll 綁定函數
$(window).on("scroll", function() { scrollFunction(); })
然後定義函數scrollFunction()
function scrollFunction() { var e = $("#page-num"); e.scrollTop = $(window).scrollTop(); e.scrollStar = e.scrollEnd; e.scrollEnd = $(window).scrollTop(); // 分页显示 if (e.scrollStar != e.scrollEnd) { // 当滚动的时候 显示分页信息 显示1秒 setTimeout(function() { e.hide(); }, 1000); var j = null; var l = $(window).height(); var d = $(window).scrollTop(); // 新页的产品列表 页数写在 li 标签里 然后循环所有的这个标签 p_lis = $("#goods-ul").find("li"); p_lis_size = p_lis.size(); for(var ss= 0; ss < p_lis_size; ss++){ f = $(p_lis[ss]); var k = f.offset().top; // 这个元素(相对于文档)的 偏移距离 // 偏移距离 大于windows 滚动距离 且 小于滚动距离+页面高度 的用来当作当前页数 if (k >= d && k < (d + l)) { j = f.attr("data-page"); } } if(j){ $("#currentPage").text(j); } e.show(); } }
頁面每個元素範例:
以上是如何用js和 jquery實作無限載入頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章!