下面我就为大家分享一篇JavaScript实现元素滚动条到达一定位置循环追加内容,具有很好的参考价值,希望对大家有所帮助
如下所示:
<!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"> //获取列表中的原有内容 window.onload=function(){ var contents=document.getElementById("list").innerHTML; //每被调用一次,就将网页原有内容添加一份,这个大家可以写自己要加载的内容或指令 function appendcontent(){ document.getElementById("list").innerHTML+=contents; } document.getElementById("contents").onscroll=function(){ //content实际高度, var contentscrollHeight=document.getElementById("contents").scrollHeight; //contentclientHeight可视区高度, var contentclientHeight=document.getElementById("contents").offsetHeight; //滚动条距顶部高度 var contentscrollTop=document.getElementById("contents").scrollTop; //通过判断滚动条的距离底部位置判断手否加载内容 var height=contentclientHeight+100; if(contentscrollTop+height>=contentscrollHeight){ if(document.getElementById("list").childNodes.length>=150){ if(document.getElementById("nodata")){ }else{ var nodata=document.createElement("p"); 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> <p 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> </p> </body> </html>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Atas ialah kandungan terperinci 在JavaScript中如何实现元素滚动条循环追加内容. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!