JavaScript实现元素滚动条到达一定位置循环追加内容

2023-09-18 16:18:05 68

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

JavaScript实现元素滚动条到达一定位置循环追加内容

热门推荐

随机推荐