如下所示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body{background-color: #eee;}#contents{margin:30px auto;width: 960px;height:300px;overflow:auto; }#list{margin: 0;padding: 0;}#list li{color:#666;list-style-type: none;background-color: #ddd;margin: 0;margin-top:10px;border-bottom: solid 1px #999;text-align: center;height:30px;}</style><script type="text/javascript">//獲取列表中的原有內(nèi)容window.onload=function(){var contents=document.getElementById("list").innerHTML;//每被調(diào)用一次，就將網(wǎng)頁原有內(nèi)容添加一份，這個大家可以寫自己要加載的內(nèi)容或指令function appendcontent(){document.getElementById("list").innerHTML+=contents;}document.getElementById("contents").onscroll=function(){//content實(shí)際高度，var contentscrollHeight=document.getElementById("contents").scrollHeight;//contentclientHeight可視區(qū)高度，var contentclientHeight=document.getElementById("contents").offsetHeight;//滾動條距頂部高度var contentscrollTop=document.getElementById("contents").scrollTop;//通過判斷滾動條的距離底部位置判斷手否加載內(nèi)容var height=contentclientHeight+100;if(contentscrollTop+height>=contentscrollHeight){if(document.getElementById("list").childNodes.length>=150){if(document.getElementById("nodata")){}else{var nodata=document.createElement("div");nodata.id="nodata";nodata.style.height="50px";nodata.style.textAlign="center";nodata.style.lineHeight="50px";nodata.style.borderTop="1px solid #eee";nodata.innerHTML="我是有底線的";nodata.style.backgroundColor="#fff";document.getElementById("list").appendChild(nodata);}console.log(document.getElementById("list").childNodes.length)return;}else{appendcontent(); }}};}</script></head><body><div id="contents"><ul id="list"><li>張朋1</li><li>張朋2</li><li>張朋3</li><li>張朋4</li><li>張朋5</li><li>張朋6</li><li>張朋7</li><li>張朋8</li><li>張朋9</li><li>張朋10</li></ul></div></body></html>以上這篇JavaScript實(shí)現(xiàn)元素滾動條到達(dá)一定位置循環(huán)追加內(nèi)容就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。
新聞熱點(diǎn)
疑難解答
圖片精選
