卡卡網(wǎng)

前面已經(jīng)介紹過(guò)JS兩種方法滾動(dòng)條上滾下滾顯示隱藏導(dǎo)航欄【親測(cè)可用】，以及【親測(cè)！3種方法】JS判斷滾動(dòng)條上滾下滾，本文將通過(guò)3個(gè)實(shí)例演示，介紹JS判斷滾動(dòng)條/某div是否到達(dá)底部/頂部。

• JS判斷滾動(dòng)條是否到達(dá)底部
• JS判斷滾動(dòng)條是否到達(dá)頂部
• JS判斷某div是否到達(dá)底部

JS判斷滾動(dòng)條是否到達(dá)底部

實(shí)例介紹

當(dāng)滾動(dòng)條到達(dá)底部時(shí)，導(dǎo)航欄消失。

demodownload

實(shí)例代碼

 window.addEventListener("scroll", function(event)
 {
     event = event || window.event;
     var scrollTop = $(this).scrollTop(); 
     console.log("$(this).scrollTop()=" + $(this).scrollTop());
     var documentHeight = $(document).height(); 
     console.log("$(document).height()=" + $(document).height());
     var windowHeight = $(window).height(); 
     console.log("$(window).height()=" + $(window).height());
     if (scrollTop + windowHeight == documentHeight)
     {
         document.getElementById("tip").style.display = "none";
     }
     else
     {
         document.getElementById("tip").style.display = "block";
     }
 });

代碼解釋

代碼主要用到三個(gè)函數(shù)值：滾動(dòng)條高度$(this).scrollTop()，窗口高度$(window).height()、文檔高度$(document).height()。

判斷方法是：當(dāng) 滾動(dòng)條高度+窗口高度=文檔高度 時(shí)，滾動(dòng)條到達(dá)底部。

這三個(gè)高度的含義及關(guān)系，你可以看此文一圖理解$(this).scrollTop()、$(window).height()與$(document).height()關(guān)系。

JS判斷滾動(dòng)條是否到達(dá)頂部

如果你理解了實(shí)例一的代碼那三個(gè)高度的含義及它們的關(guān)系，那么判斷滾動(dòng)條是否到達(dá)頂部就輕而易舉了。

實(shí)例介紹

當(dāng)滾動(dòng)條到達(dá)頂部時(shí)，導(dǎo)航欄消失。

demodownload

實(shí)例代碼

window.addEventListener("scroll", function(event)
{
    event = event || window.event;
    var scrollTop = $(this).scrollTop();
    if (scrollTop == 0)
    {
        document.getElementById("tip").style.display = "none";
    }
    else
    {
        document.getElementById("tip").style.display = "block";
    }
});

代碼解釋

代碼非常簡(jiǎn)短，只需使用一個(gè)函數(shù)$(this).scrollTop()，這個(gè)函數(shù)是獲得滾動(dòng)條的位置。

判斷條件：滾動(dòng)條的位置高度為0，即代表滾動(dòng)條在頂部位置。 

JS判斷某div是否到達(dá)底部

在實(shí)際應(yīng)用中，我們經(jīng)常看到某div隨網(wǎng)頁(yè)從下往上滾到窗口底部時(shí)就顯示出來(lái)。這個(gè)也好辦，我們只需獲得此div的位置，然后利用它，結(jié)合滾動(dòng)條高度和文檔高度，即可判斷出該div是否到達(dá)了底部。

實(shí)例介紹

當(dāng)【網(wǎng)站速度診斷】到達(dá)網(wǎng)頁(yè)底部時(shí)，導(dǎo)航欄消失。

demodownload

實(shí)例代碼

window.addEventListener("scroll", function(event)
 {
     event = event || window.event;
     var scrollTop = $(this).scrollTop(); //滾動(dòng)條高度
     var documentHeight = $(document).height(); //文檔高度
     var windowHeight = $(window).height(); //窗口高度
     var divTop = document.getElementById("divTarget").offsetTop; //目標(biāo)div高度
     if (scrollTop + windowHeight > divTop)
     {
         document.getElementById("tip").style.display = "none";
     }
     else
     {
         document.getElementById("tip").style.display = "block";
     }
});

代碼解釋

重點(diǎn)是要獲得目標(biāo)div的高度，在JS里很容易就能實(shí)現(xiàn)，只需這個(gè)方法就能獲得：

document.getElementById("divTarget").offsetTop

得到目標(biāo)div的高度之后，再按照實(shí)例一的方法，判斷條件是：滾動(dòng)條高度 + 窗口高度 > 目標(biāo)div高度。

總結(jié)

本文介紹了三個(gè)常見的實(shí)例，主要是運(yùn)用了滾動(dòng)條高度$(this).scrollTop()，窗口高度$(window).height()、文檔高度$(document).height()的知識(shí)，實(shí)現(xiàn)我們想要的功能效果。

參考文章

• 一圖理解$(this).scrollTop()、$(window).height()與$(document).height()關(guān)系
• JS兩種方法滾動(dòng)條上滾下滾顯示隱藏導(dǎo)航欄【親測(cè)可用】
• 【親測(cè)！3種方法】JS判斷滾動(dòng)條上滾下滾

標(biāo)簽: 滾動(dòng)條