【亲测！3种方法】JS判断滚动条上滚下滚

在上一篇文章中介绍过【亲测！ 3方法】JS判断滚动条上下滚动，详细分析JS如何判断滚动条上下滚动。我们可以使用这段代码来实现导航栏的显示和隐藏控制。向上滚动滚动条时，显示导航栏，向下滚动滚动条时，隐藏导航条。这正是本文要介绍的内容。本文将介绍两种方法简单导航条代码，介绍如何通过JS在滚动条上下滚动时显示和隐藏导航栏。

通过代码测试的浏览器有：Chrome、Firefox、IE11、Android手机UC。

演示下载

JS实现滚动条上下滚动显示隐藏导航栏：方法一

JS代码

function scroll(fn)
{
    var beforeScrollTop = $(this).scrollTop(),
        fn = fn || function() {};
    window.addEventListener("scroll", function()
    {
        var afterScrollTop = $(this).scrollTop(),
            delta = afterScrollTop - beforeScrollTop;
        if (delta === 0) return false;
        fn(delta > 0 ? "down" : "up");
        beforeScrollTop = afterScrollTop;
    }, false);
}
//第一种写法
scroll(function(direction)
{
    console.log(direction);
    if (direction == "up")
    {
        document.getElementById("tip").style.display = "block";
    }
    else if (direction == "down")
    {
        document.getElementById("tip").style.display = "none";
    }
});
//第二种写法执行完事件后的回调函数
/*
   function fn(direction) {
        console.log(direction); //down or up   
    };

    window.onscroll=function(){
         scroll( fn );
    }
*/

演示下载

经过测试，以上两种写法都可以。

$(this).scrollTop() 是判断滚动条的位置。通过比较前后位置，判断滚动条是向上滚动还是向下滚动。

下车或上车后，我们可以控制显示和隐藏导航栏。

这种方法比较容易理解，实现代码也比较简单。

JS实现滚动条上下滚动显示隐藏导航栏：方法二

演示下载

这个方法其实是第一种方法的增强版，因为据说第一种方法在iPhone上使用时，导航栏有跳动现象。第一种方法是一直判断滚动条上下滚动不断执行显示/隐藏导航栏的代码，可能会出现闪烁现象，第二种方法是当滚动条继续向下或向上滚动滚动条滚动。执行时，只执行一次。在向下滚动或向上滚动过程中，不执行显示和隐藏导航栏的代码简单导航条代码，从而可以避免闪烁的现象。详细分析请看【亲测！ 3种方法】JS判断滚动条上下滚动。

JS代码如下：

function scrollDirect(fn)
{
    var beforeScrollTop = $(this).scrollTop(); //滚动条顶部位置
    fn = fn || function() {};
    window.addEventListener("scroll", function(event)
    {
        event = event || window.event;
        var afterScrollTop = $(this).scrollTop(); //滚动条顶部位置
        //console.log("afterScrollTop=" + $(this).scrollTop());
        delta = afterScrollTop - beforeScrollTop;
        beforeScrollTop = afterScrollTop;
        var scrollTop = $(this).scrollTop(); //滚动条顶部位置
        //console.log("$(this).scrollTop()=" + $(this).scrollTop());
        var scrollHeight = $(document).height(); //文档高度
        //console.log("$(document).height()=" + $(document).height());
        var windowHeight = $(this).height(); //窗口高度
        //console.log("$(this).height()=" + $(this).height());
        if (afterScrollTop  $(document.body).height() - 10)
        {
            fn('up');
        }
        else
        {
            if (Math.abs(delta) < 10)
            {
                return false;
            }
            fn(delta > 0 ? "down" : "up");
        }
    }, false);
}
var upflag = 1;
var downflag = 1;
//scroll滑动,上滑和下滑只执行一次！
scrollDirect(function(direction)
{
    if (direction == "down")
    {
        if (downflag)
        {
            console.log("down");
            document.getElementById("tip").style.display = "none";
            downflag = 0;
            upflag = 1;
        }
    }
    if (direction == "up")
    {
        if (upflag)
        {
            console.log("up");
            document.getElementById("tip").style.display = "block";
            downflag = 1;
            upflag = 0;
        }
    }
});

演示下载

总结

本文通过两种方法介绍了通过JS在滚动条上滚动时如何显示和隐藏导航栏。第一种方法更简单，但在 iPhone 上可能表现不佳，第二种方法是第一种方法的改进版本，在各种设备上表现良好。本文中的示例代码经过我自己的测试可用。通过代码测试的浏览器有：Chrome、Firefox、IE11、Android phone UC。

相关文章