快捷導(dǎo)航

基于javascript實現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)

更新時間：2015年11月30日 15:37:35 作者：iceKnight

這篇文章主要介紹了基于javascript實現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下

廢話不多說了，直接給大家貼js代碼了。

 <!DOCTYPE html>
 <html>
 <head>
   <script src="jquery-...js" type="text/javascript"></script>
   <script type="text/javascript">
     $(document).ready(function () {
       var range = ;       //距下邊界長度/單位px
       var elemt = ;       //插入元素高度/單位px
       var maxnum = ;      //設(shè)置加載最多次數(shù)
       var num = ;
       var totalheight = ;
       var main = $("#content");           //主體元素
       $(window).scroll(function () {
         var srollPos = $(window).scrollTop();  //滾動條距頂部距離(頁面超出窗口的高度)
         //console.log("滾動條到頂部的垂直高度: "+$(document).scrollTop());
         //console.log("頁面的文檔高度 ："+$(document).height());
         //console.log('瀏覽器的高度：'+$(window).height());
         totalheight = parseFloat($(window).height()) + parseFloat(srollPos);//滾動條當(dāng)前位置距頂部距離+瀏覽器的高度
         if (($(document).height() - totalheight) <= range && num != maxnum) {//頁面底部與滾動條底部的距離<range
           main.append("<div style='border:px solid tomato;margin-top:px;color:#ac" + (num % ) + (num % ) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");
           main.append("<div style='border:px solid tomato;margin-top:px;color:#ac" + (num % ) + (num % ) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");
           num++;
         }
       });
     });
   </script>
 </head>
 <body>
   <div id="content" style="height:px">
     <div id="follow">this is a scroll test;<br />  頁面下拉自動加載內(nèi)容</div>
     <div style='border:px solid tomato;margin-top:px;color:#ac;height:'>hello world test DIV</div>
   </div>
 </body>
 </html>

ps：原生JavaScript如何觸發(fā)滾動條事件?

<script>
window.onscroll = function(){
var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
var scrollH = document.documentElement.scrollHeight||document.body.scrollHeight;
var clientH = document.documentElement.clientHeight||document.body.clientHeight
//console.log(scrollT +"+"+scrollH+"+"+clientH);
if(scrollT == scrollH - clientH){
console.log("到底部了");
}else if(scrollT == 0){
console.log("到頂部了");
}
}
</script>

您可能感興趣的文章: