JavaScript 鼠标滚轮事件（实现导航栏上滚显示）

最新推荐文章于 2022-01-13 10:15:27 发布

S_aitama

最新推荐文章于 2022-01-13 10:15:27 发布

阅读量2.1k

点赞数 4

分类专栏： Javascript

本文链接：https://blog.csdn.net/S_aitama/article/details/105769273

版权

Javascript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

文章目录

detail与wheelDelta
上下滚动检测
隐藏导航栏例子

当在垂直方向滚动页面时就会触发 mousewheel 事件

detail与wheelDelta

判断鼠标滚轮滚动方向在各浏览器的属性不同

现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致

detail与wheelDelta只各取两个值，detail取±3，wheelDelta取±120， 两值正负代表的方向相反

在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120
而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3

上下滚动检测

      var scrollFunc = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件             
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
                alert("滑轮向上滚动");
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
                alert("滑轮向下滚动");
            }
        } else if (e.detail) {  //Firefox滑轮事件
            if (e.detail< 0) { //当滑轮向上滚动时
                alert("滑轮向上滚动");
            }
            if (e.detail> 0) { //当滑轮向下滚动时
                alert("滑轮向下滚动");
            }
        }
    }
    //给页面绑定滑轮滚动事件
    	//火狐使用DOMMouseScroll绑定鼠标滚动
    document.addEventListener('DOMMouseScroll', scrollFunc, false);
    	//其他浏览器用mousewheel绑定
    document.onmousewheel = scrollFunc;

获取滚动方向后可以实现某元素的下滚隐藏 / 上滚显示

使用js改变css：

document.getElementById(id).style.property = new style

可以在上下滚动时修改display或visible （根据实际布局）

document.getElementById(id).style.display = none;
//document.getElementById(id).style.visibility  = hidden;

隐藏导航栏例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            height: 200vh;
            background-color: darkcyan;
        }
        div#nav {
            position: fixed;
            width: 100vw;
            height: 40px;
            background-color: blanchedalmond;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <div id="nav"></div>

    <script>
        var scrollFunc = function (e) {
            let nav = document.getElementById('nav');

            e = e || window.event;
            if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件             
                if (e.wheelDelta > 0) { //当滑轮向上滚动时
                    nav.style.position = "fixed";
                }
                if (e.wheelDelta < 0) { //当滑轮向下滚动时
                    nav.style.position = "absolute";
                }
            } else if (e.detail) {  //Firefox滑轮事件
                if (e.detail < 0) { //当滑轮向上滚动时
                    nav.style.position = "fixed";
                }
                if (e.detail > 0) { //当滑轮向下滚动时
                    nav.style.position = "absolute";
                }
            }
        }
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    	document.onmousewheel = scrollFunc;  
    </script>
</body>

</html>

此demo更改导航栏的position值，实现不在首页时上滚也能显示导航栏（利用fixed定位）

S_aitama

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
6
评论
JavaScript 鼠标滚轮事件（实现导航栏上滚显示）

文章目录detail与wheelDelta上下滚动检测隐藏导航栏例子当在垂直方向滚动页面时就会触发 mousewheel 事件detail与wheelDelta判断鼠标滚轮滚动方向在各浏览器的属性不同现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致det...
复制链接

扫一扫