ホームページ >ウェブフロントエンド >htmlチュートリアル >プレースホルダーを使用してリストの一番下までスクロールし、data_html/css_WEB-ITnose を再読み込みします。
プレースホルダーを使用してリストの一番下までスクロールし、data_html/css_WEB-ITnose を再読み込みします。
- WBOYオリジナル
- 2016-06-21 08:50:341090ブラウズ
データを更新するために一番下までスクロールすることは非常に一般的な要件であり、Web サイトの最適化の一部でもあります。
- ページ効果
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 までご連絡ください。