滚动到页面底部自动加载内容
生活随笔
收集整理的這篇文章主要介紹了
滚动到页面底部自动加载内容
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上網時經常會看到許多酷炫的網頁，其中給我印象較深刻的是鼠標滾動到頁面底部時會自動加載內容，一直都很好奇是怎么樣做到的，于是自己也嘗試著寫了一下。
先上個完整代碼吧：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="js/jquery.min.js"></script><style>div{width:900px;height:800px;}li{list-style-type:none;}</style> </head> <body id="container"><div>lfjakjflkf</div><script>//獲取滾動條當前的位置 function getscrolltop() { var scrolltop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrolltop = document.documentElement.scrollTop; } else if (document.body) { scrolltop = document.body.scrollTop; } return scrolltop; } //獲取當前可視范圍的高度 function getclientheight() { var clientheight = 0; if (document.body.clientHeight && document.documentElement.clientHeight) { clientheight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); } else { clientheight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); } return clientheight; } //獲取文檔完整的高度 function getscrollheight() { return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); } window.onscroll = function () { if(getscrolltop() + getclientheight() == getscrollheight()) { var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP")};xhr.open("get","load.json",true);xhr.onreadystatechange = function(){if(xhr.readyState == 4&& xhr.status==200){var txt = xhr.responseText;var str = "";// 由于獲取到的是json字符串，因此必須現將其轉換為json對象。 $.each(JSON.parse(txt),function(key,value){str += "<li>"+'姓名：'+value[0].name+'。年齡為：'+value[0].age+'。性別為：'+value[0].sex+"</li>"+"<br/>"+"<br/>";$("body").append(str) })}}xhr.send(); }} </script> </body> </html>?
load.json文件的代碼如下：
{"person":[{"name":"tom","age":"25","sex":"男"} ]}?
好了，下面來分析下這段代碼，其實先是頁面加載完畢會有一部分內容，然后滑動滾動條，一直到文檔可視區域高度+滾動條距離文檔頂部高度 等于 文檔總高度時 異步加載一個json文件的內容。
這里有幾個要點：1、獲取文檔的完整高度。2、獲取文檔可視區域高度。3、獲取滾動條距離文檔頂部的高度。4、判斷滾動條是否滑動到頁面底部，如到了底部則異步加載json文件。5、需要將異步加載的json文件渲染到頁面中，由于獲取到的是json字符串，因此需要使用JSON.parse()方法先將其轉換為json對象，才可以使用$.each()方法進行遍歷，然后逐個獲取數據。
其實我這里獲取文檔高度、可視區域高度以及滾動條距離文檔頂部高度使用js寫的，相對要復雜點，如果用jQuery寫的話，會是很簡潔的，如
獲取文檔完整高度，可以使用$(document).height();
獲取文檔可視區域高度，可以使用$(window).height();
獲取滾動條距離文檔頂部的高度，可以使用$(window).scrollTop()。
轉載于:https://www.cnblogs.com/jf-67/p/7743088.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的滚动到页面底部自动加载内容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ibase4j使用信息心得
- 下一篇： 物联网学习之旅：微信小程序控制STM32