Heim >Web-Frontend >HTML-Tutorial >借占位符实现滚动到列表底部重新加载数据_html/css_WEB-ITnose
借占位符实现滚动到列表底部重新加载数据_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:50:341090Durchsuche
滚动到底部更新数据是个很常见的需求，也是网站优化的一部分。
- 页面效果
pic1.png
- 第一次滚动到底部新加载数据
pic2.png
- 再滚动
pic3.png
-
源代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> li{width: 100px;height: 100px;background: #000;margin-bottom: 15px;color: #fff;text-align: center;} </style> <script src="./jquery.min.js"></script></head><body> <ul class="ul-wrap"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <div id="loadInfo"></div> <script> function randomColor(){ var color="#"; var colorArr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; for(i=0;i<6;i++){ var cur=randomNum(15,0); color+=colorArr[cur]; } function randomNum(max,min){ return Math.floor(Math.random()*(max-min+1)+min) } return color; } //获取滚动高度、文档高度、浏览器视口高度 var heightFuns=function(){ //获取滚动高度 heightFuns.prototype.getScrollTop=function (){ var scrollTop=0,bodyScrollTop=0,documentScrollTop=0; if(document.body){ bodyScrollTop=document.body.scrollTop; } if(document.documentElement){ documentScrollTop=document.documentElement.scrollTop; } scrollTop = (bodyScrollTop-documentScrollTop>0)?bodyScrollTop:documentScrollTop; return scrollTop; } //获取文档的总高度 heightFuns.prototype.getScrollHeight=function (){ var scrollHeight=0,bodyScrollHeight=0,documentScrollHeight; if(document.body){ bodyScrollHeight=document.body.scrollHeight; } if(document.documentElement){ documentScrollHeight=document.documentElement.scrollHeight; } scrollHeight=(bodyScrollHeight-documentScrollHeight>0)?bodyScrollHeight:documentScrollHeight; return scrollHeight; } //获取浏览器视口的高度 heightFuns.prototype.getWindowHeight=function (){ var windowHeight=0; if(document.compatMode == 'CSS1Compat'){ windowHeight=document.documentElement.clientHeight; }else{ windowHeight=document.body.clientHeight; } return windowHeight; } } function showData(){ $(".ul-wrap").append("<li>new</li>"); $("body").css("background",randomColor()); $("#loadInfo").html(""); } $(function(){ var heightObj=new heightFuns(); window.onscroll=function(){ if(heightObj.getScrollTop()==heightObj.getScrollHeight()-heightObj.getWindowHeight()){ // setTimeout(showData,1000); showData(); $("#loadInfo").html("正在加载..."); } } }); </script></body></html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：圣杯布局三步曲_html/css_WEB-ITnoseNächster Artikel：开始使用React和JSX_html/css_WEB-ITnose