卡卡网

前面已经介绍过JS两种方法滚动条上滚下滚显示隐藏导航栏【亲测可用】，以及【亲测！3种方法】JS判断滚动条上滚下滚，本文将通过3个实例演示，介绍JS判断滚动条/某div是否到达底部/顶部。

• JS判断滚动条是否到达底部
• JS判断滚动条是否到达顶部
• JS判断某div是否到达底部

JS判断滚动条是否到达底部

实例介绍

当滚动条到达底部时，导航栏消失。

demodownload

实例代码

 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";
     }
 });

代码解释

代码主要用到三个函数值：滚动条高度$(this).scrollTop()，窗口高度$(window).height()、文档高度$(document).height()。

判断方法是：当 滚动条高度+窗口高度=文档高度 时，滚动条到达底部。

这三个高度的含义及关系，你可以看此文一图理解$(this).scrollTop()、$(window).height()与$(document).height()关系。

JS判断滚动条是否到达顶部

如果你理解了实例一的代码那三个高度的含义及它们的关系，那么判断滚动条是否到达顶部就轻而易举了。

实例介绍

当滚动条到达顶部时，导航栏消失。

demodownload

实例代码

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";
    }
});

代码解释

代码非常简短，只需使用一个函数$(this).scrollTop()，这个函数是获得滚动条的位置。

判断条件：滚动条的位置高度为0，即代表滚动条在顶部位置。 

JS判断某div是否到达底部

在实际应用中，我们经常看到某div随网页从下往上滚到窗口底部时就显示出来。这个也好办，我们只需获得此div的位置，然后利用它，结合滚动条高度和文档高度，即可判断出该div是否到达了底部。

实例介绍

当【网站速度诊断】到达网页底部时，导航栏消失。

demodownload

实例代码

window.addEventListener("scroll", function(event)
 {
     event = event || window.event;
     var scrollTop = $(this).scrollTop(); //滚动条高度
     var documentHeight = $(document).height(); //文档高度
     var windowHeight = $(window).height(); //窗口高度
     var divTop = document.getElementById("divTarget").offsetTop; //目标div高度
     if (scrollTop + windowHeight > divTop)
     {
         document.getElementById("tip").style.display = "none";
     }
     else
     {
         document.getElementById("tip").style.display = "block";
     }
});

代码解释

重点是要获得目标div的高度，在JS里很容易就能实现，只需这个方法就能获得：

document.getElementById("divTarget").offsetTop

得到目标div的高度之后，再按照实例一的方法，判断条件是：滚动条高度 + 窗口高度 > 目标div高度。

总结

本文介绍了三个常见的实例，主要是运用了滚动条高度$(this).scrollTop()，窗口高度$(window).height()、文档高度$(document).height()的知识，实现我们想要的功能效果。

参考文章

• 一图理解$(this).scrollTop()、$(window).height()与$(document).height()关系
• JS两种方法滚动条上滚下滚显示隐藏导航栏【亲测可用】
• 【亲测！3种方法】JS判断滚动条上滚下滚

标签: 滚动条