<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        jQuery實現判斷滾動條滾動到document底部的方法分析

        來源:懂視網 責編:小采 時間:2020-11-27 21:51:46
        文檔

        jQuery實現判斷滾動條滾動到document底部的方法分析

        jQuery實現判斷滾動條滾動到document底部的方法分析:本文實例講述了jQuery實現判斷滾動條滾動到document底部的方法。分享給大家供大家參考,具體如下: 滾動條沒有實際的高度。只是為了呈現效果才在外型上面有長度。 在js當中也沒有提供滾動條的高度API。 參考了網上有關資料:判斷滾動條到底部的基本邏輯是滾動
        推薦度:
        導讀jQuery實現判斷滾動條滾動到document底部的方法分析:本文實例講述了jQuery實現判斷滾動條滾動到document底部的方法。分享給大家供大家參考,具體如下: 滾動條沒有實際的高度。只是為了呈現效果才在外型上面有長度。 在js當中也沒有提供滾動條的高度API。 參考了網上有關資料:判斷滾動條到底部的基本邏輯是滾動

        本文實例講述了jQuery實現判斷滾動條滾動到document底部的方法。分享給大家供大家參考,具體如下:

        滾動條沒有實際的高度。只是為了呈現效果才在外型上面有長度。

        在js當中也沒有提供滾動條的高度API。

        參考了網上有關資料:判斷滾動條到底部的基本邏輯是滾動條滾動的高度加上視口的高度,正好是document的高度,公式表示為

        滾動條滾動的高度+瀏覽器視口的高度>=document的高度。

        參考網上資料,具體代碼如下:

        //滾動條在Y軸上的滾動距離
        function getScrollTop() {
         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;
        }
        //文檔的總高度
        function getScrollHeight() {
         var scrollHeight = 0,
         bodyScrollHeight = 0,
         documentScrollHeight = 0;
         //兼容谷歌
         if (document.body) {
         bodyScrollHeight = document.body.scrollHeight;
         }
         //兼容火狐
         if (document.documentElement) {
         documentScrollHeight = document.documentElement.scrollHeight;
         }
         scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
         return scrollHeight;
        }
        //瀏覽器視口的高度
        function getWindowHeight() {
         var windowHeight = 0;
         windowHeight = document.documentElement.clientHeight;
         return windowHeight;
        }
        window.onscroll = function() {
         if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
         alert("you are in the bottom!");
         }
        };
        
        

        jquery實現代碼:

        $(window).scroll(function(){
         var scrollTop = $(this).scrollTop();
         var scrollHeight = $(document).height();
         var windowHeight = $(this).height();
         if(scrollTop + windowHeight == scrollHeight){
         alert("you are in the bottom");
         }
        });
        
        

        代碼測試有效果。

        感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

        更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》

        希望本文所述對大家jQuery程序設計有所幫助。

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        jQuery實現判斷滾動條滾動到document底部的方法分析

        jQuery實現判斷滾動條滾動到document底部的方法分析:本文實例講述了jQuery實現判斷滾動條滾動到document底部的方法。分享給大家供大家參考,具體如下: 滾動條沒有實際的高度。只是為了呈現效果才在外型上面有長度。 在js當中也沒有提供滾動條的高度API。 參考了網上有關資料:判斷滾動條到底部的基本邏輯是滾動
        推薦度:
        標簽: 的方法 滾動 底部
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲国产AV无码专区亚洲AV| 亚洲狠狠爱综合影院婷婷| 国产精品亚洲lv粉色| 亚洲黄色在线观看视频| 国产亚洲精AA在线观看SEE| 免费在线观看你懂的| 国产又大又粗又硬又长免费| 69视频在线观看高清免费| 久久久WWW成人免费精品| 色婷婷亚洲一区二区三区| 亚洲AV成人无码天堂| 亚洲春色另类小说| 久久亚洲AV成人无码国产| 亚洲最大激情中文字幕| 亚洲国产一成人久久精品| 激情97综合亚洲色婷婷五| 亚洲精品动漫人成3d在线| 免费国产综合视频在线看| 免费大黄网站在线看| 无码专区一va亚洲v专区在线| 免费人成网站7777视频| 免费大黄网站在线看| 亚洲精品无码av人在线观看| 久久精品国产精品亚洲精品| 久久精品国产精品亚洲艾草网 | 亚洲中文字幕无码中文字| 亚洲日韩精品无码AV海量| 国产成人综合亚洲绿色| 国产视频精品免费视频| 国产h肉在线视频免费观看| 在线免费视频一区| 亚洲乱码精品久久久久..| 亚洲精品日韩专区silk| 亚洲avav天堂av在线网毛片| a国产成人免费视频| 大陆一级毛片免费视频观看i| 国产亚洲精品不卡在线| 亚洲AV无码乱码麻豆精品国产| 黄色网页免费观看| 免费能直接在线观看黄的视频| 国产aa免费视频|