这篇文章给大家分享的是有关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("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实现元素滚动条到达一定位置循环追加内容的示例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。