借占位符实现滚动到列表底部重新加载数据_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-21 08:50:341087검색
滚动到底部更新数据是个很常见的需求，也是网站优化的一部分。
- 页面效果
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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.