个人如何开发小程序_JavaScript完成元素滚动条抵达

JavaScript实现元素滚动条到达一定位置循环追加内容       下面小编就为大家分享一篇JavaScript实现元素滚动条到达一定位置循环追加内容，具有很好的参考价值，希望对大家有所帮助
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实现元素滚动条到达一定位置循环追加内容就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。