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

2018-06-24 01:09:51来源：未知阅读 ()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 body{
 8 background-color: #eee;
 9 }
10 #contents{
11 margin:30px auto;
12 width: 960px;
13 height:300px;
14 overflow:auto; 
15 }
16 #list{
17 margin: 0;
18 padding: 0;
19 }
20 #list li{
21 color:#666;
22 list-style-type: none;
23 background-color: #ddd;
24 margin: 0;
25 margin-top:10px;
26 border-bottom: solid 1px #999;
27 text-align: center;
28 height:30px;
29 }
30 </style>
31 <script type="text/javascript">
32 //获取列表中的原有内容
33 window.onload=function(){
34 
35 var contents=document.getElementById("list").innerHTML;
36 //每被调用一次，就将网页原有内容添加一份，这个大家可以写自己要加载的内容或指令
37 function appendcontent(){
38 document.getElementById("list").innerHTML+=contents;
39 }
40 document.getElementById("contents").onscroll=function(){
41 //content实际高度，
42 var contentscrollHeight=document.getElementById("contents").scrollHeight;
43 //contentclientHeight可视区高度，
44 var contentclientHeight=document.getElementById("contents").offsetHeight;
45 //滚动条距顶部高度
46 var contentscrollTop=document.getElementById("contents").scrollTop;
47 //通过判断滚动条的距离底部位置判断手否加载内容
48 var height=contentclientHeight+100;
49 if(contentscrollTop+height>=contentscrollHeight){
50 if(document.getElementById("list").childNodes.length>=150){
51 if(document.getElementById("nodata")){
52 
53 }else{
54 var nodata=document.createElement("div");
55 nodata.id="nodata";
56 nodata.style.height="50px";
57 nodata.style.textAlign="center";
58 nodata.style.lineHeight="50px";
59 nodata.style.borderTop="1px solid #eee";
60 nodata.innerHTML="我是有底线的";
61 nodata.style.backgroundColor="#fff";
62 document.getElementById("list").appendChild(nodata);
63 }
64 console.log(document.getElementById("list").childNodes.length)
65 return;
66 }else{
67 appendcontent(); 
68 }
69 
70 }
71 };
72 
73 }
74 </script>
75 </head>
76 <body>
77 <div id="contents">
78 <ul id="list">
79 <li>张朋1</li>
80 <li>张朋2</li>
81 <li>张朋3</li>
82 <li>张朋4</li>
83 <li>张朋5</li>
84 <li>张朋6</li>
85 <li>张朋7</li>
86 <li>张朋8</li>
87 <li>张朋9</li>
88 <li>张朋10</li>
89 </ul>
90 </div>
91 </body>
92 </html>