이제 루프에 콘텐츠를 추가하기 위해 특정 위치에 도달하는 요소 스크롤 막대의 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>
위 내용은 저입니다. 모두를 위해 정리한 내용이니, 앞으로도 많은 분들께 도움이 되었으면 좋겠습니다.
관련 기사:
vue에서 element-ui의 Upload 업로드 구성 요소를 사용하는 방법
위 내용은 JavaScript에 콘텐츠를 추가하기 위해 요소 스크롤 막대 루프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!