JavaScript实现元素滚动条到达一定位置循环追加内容
如下所示:
Document body{ background-color:#eee; } #contents{ margin:30pxauto; width:960px; height:300px; overflow:auto; } #list{ margin:0; padding:0; } #listli{ color:#666; list-style-type:none; background-color:#ddd; margin:0; margin-top:10px; border-bottom:solid1px#999; text-align:center; height:30px; } //获取列表中的原有内容 window.onload=function(){ varcontents=document.getElementById("list").innerHTML; //每被调用一次,就将网页原有内容添加一份,这个大家可以写自己要加载的内容或指令 functionappendcontent(){ document.getElementById("list").innerHTML+=contents; } document.getElementById("contents").onscroll=function(){ //content实际高度, varcontentscrollHeight=document.getElementById("contents").scrollHeight; //contentclientHeight可视区高度, varcontentclientHeight=document.getElementById("contents").offsetHeight; //滚动条距顶部高度 varcontentscrollTop=document.getElementById("contents").scrollTop; //通过判断滚动条的距离底部位置判断手否加载内容 varheight=contentclientHeight+100; if(contentscrollTop+height>=contentscrollHeight){ if(document.getElementById("list").childNodes.length>=150){ if(document.getElementById("nodata")){ }else{ varnodata=document.createElement("div"); nodata.id="nodata"; nodata.style.height="50px"; nodata.style.textAlign="center"; nodata.style.lineHeight="50px"; nodata.style.borderTop="1pxsolid#eee"; nodata.innerHTML="我是有底线的"; nodata.style.backgroundColor="#fff"; document.getElementById("list").appendChild(nodata); } console.log(document.getElementById("list").childNodes.length) return; }else{ appendcontent(); } } }; } 张朋1 张朋2 张朋3 张朋4 张朋5 张朋6 张朋7 张朋8 张朋9 张朋10