快捷導(dǎo)航

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

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

這篇文章主要介紹了基于javascript實(shí)現(xiàn)瀏覽器滾動(dòng)條快到底部時(shí)自動(dòng)加載數(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();  //滾動(dòng)條距頂部距離(頁面超出窗口的高度)
         //console.log("滾動(dòng)條到頂部的垂直高度: "+$(document).scrollTop());
         //console.log("頁面的文檔高度 ："+$(document).height());
         //console.log('瀏覽器的高度：'+$(window).height());
         totalheight = parseFloat($(window).height()) + parseFloat(srollPos);//滾動(dòng)條當(dāng)前位置距頂部距離+瀏覽器的高度
         if (($(document).height() - totalheight) <= range && num != maxnum) {//頁面底部與滾動(dòng)條底部的距離<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 />  頁面下拉自動(dòng)加載內(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ā)滾動(dòng)條事件?

<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>

您可能感興趣的文章:

相關(guān)文章

簡(jiǎn)單談?wù)凧avaScript寄生式組合繼承
寄生組合式繼承,是集寄生式繼承和組合繼承的有點(diǎn)與一身,主要是通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混成形式來繼承方法,這篇文章主要給大家介紹了關(guān)于JavaScript寄生式組合繼承的相關(guān)資料,需要的朋友可以參考下
2021-08-08
微信小程序開發(fā)之路由切換頁面重定向問題
這篇文章主要介紹了微信小程序開發(fā)之路由切換頁面重定向問題，又通過實(shí)例代碼給大家介紹了微信小程序的路由跳轉(zhuǎn)方法,需要的朋友可以參考下
2018-09-09
QRCode.js二維碼生成并能長按識(shí)別
這篇文章主要為大家詳細(xì)介紹了QRCode.js二維碼生成并能長按識(shí)別，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
詳解JavaScript作用域閉包
這篇文章主要介紹了JavaScript作用域閉包的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
javascript輸入CD-KEY自動(dòng)分割的代碼
開發(fā)過程中用寫的一個(gè)腳本，記錄下來以備后用與他用，其中attributes["max"].nodeValue是取HTML自定義的 max屬性（兼容Firefox和IE）
2010-10-10
改變文件域的樣式實(shí)現(xiàn)思路同時(shí)兼容ie、firefox
正如標(biāo)題所言只是模擬了file文件域的外觀，其實(shí)起作用的還是文件域file，這樣就很方便，感興趣的朋友可以了解下
2013-10-10
一文詳解JavaScript數(shù)組對(duì)象和字符串對(duì)象
這篇文章主要介紹了JavaScript數(shù)組對(duì)象和字符串對(duì)象，文章中有詳細(xì)的代碼示例，對(duì)學(xué)習(xí)或工作有一定的幫助，需要的小伙伴可以參考一下
2023-04-04
WebStorm ES6 語法支持設(shè)置&babel使用及自動(dòng)編譯(詳解)
下面小編就為大家?guī)硪黄猈ebStorm ES6 語法支持設(shè)置&babel使用及自動(dòng)編譯(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
JavaScript實(shí)現(xiàn)可拖拽的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)可拖拽的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
js 獲取(接收)地址欄參數(shù)值的方法
當(dāng)?shù)刂窓诤袇?shù)，我們可以再目標(biāo)頁面通過window.location.search來獲取我們需要的參數(shù)及其值，接下來為大家介紹下詳細(xì)獲取方法，感興趣的朋友可以參考下哈
2013-04-04