jq 判断鼠标是向上滚动还是向下滚动

最新推荐文章于 2022-05-27 22:32:37 发布

那年1998

最新推荐文章于 2022-05-27 22:32:37 发布

阅读量2.4k

点赞数

分类专栏：静态页面文章标签：鼠标滚动事件

本文链接：https://blog.csdn.net/qq_38857381/article/details/90113693

版权

静态页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在说案例之前先介绍几点：

1. 在使用jquery 的语法绑定事件，得到的事件对象是jq事件对象，所以直接用e是不能获取所需要的事件的，因为jq会在原始的dom对象中进行包装，如果需要获取元素的DOM事件对象，需要通过originalEvent 获取即可

2. 鼠标滚动事件 mousewheel （但是存在兼容问题）

下面是源码

css样式：

<style>
        body,
        html {
            background: #ccc;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .layout {
            margin: 0 auto;
            height: 150%;
            width: 640px;
            background-color: orange;
        }
        .nav {
            /* display: none; */
            width: 640px;
            height: 80px;
            background-color: green;
            position: fixed;
            bottom: 0;
        }
    </style>

html和js

 <div class="layout">
        <div class="body">
            内容区域
        </div>
        <div class="nav">
            <p>导航区域</p>
        </div>
    </div>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script>
        $(document).on("mousewheel DOMMouseScroll", function (e) {
            // jq 获取dom 事件对象要通过originalEvent 
            var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
                // chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
            if (delta > 0) {
                // 向上滚
                $('.nav').slideUp(600);

            } else if (delta < 0) {
                // 向下滚
                $('.nav').slideDown(600);

            }
        });
    </script>