zoukankan      html  css  js  c++  java
  • 使用JS实现鼠标滚轮事件

    网站需要实现鼠标滚轮滚一下,页面向下滑向下一个锚点,由于前面有个一样式必须用jQuery1.3.2,而好多滚轮事件都使用了更高版本的jQuery,于是就从网上找了找

    <script type="text/javascript">
            var sel_index = -1
            var sel_max = $(".billboard-hero").length - 1;
            function handle(delta) {
                var s = delta + ": ";
                if (delta < 0) {
                    sel_index++;
                    s += "您在向下滚……";
                    s += sel_index;
                    if (sel_index >= sel_max) sel_index = sel_max;
                }
                else {
                    sel_index--;
                    s += "您在向上滚……";
                    s += sel_index;
                    if (sel_index <= -1) sel_index = -1;
                }
                location.href = "#" + $(".billboard-hero")[sel_index].id;
            }
            function wheel(event) {
                var delta = 0;
                if (!event) event = window.event;
                if (event.wheelDelta) {
                    delta = event.wheelDelta / 120;
                    if (window.opera) delta = -delta;
                } else if (event.detail) {
                    delta = -event.detail / 3;
                }
                if (delta)
                    handle(delta);
            }
    
            window.addEventListener ? window.addEventListener("DOMMouseScroll", this.wheel, false) : null;
    
            document.onmousewheel = this.wheel;
        </script>

    其实和网上的差不多,主要是发现在Chrome和360急速模式下鼠标滚轮滚一下,会触发两次,所以需要

    window.addEventListener ? window.addEventListener("DOMMouseScroll", this.wheel, false) : null;

    不过本人水平有限,不明其中觉厉...

  • 相关阅读:
    redis>lua脚本
    redis百万级数据存取
    spring之自定义注解
    spring>aop
    git的回退和撤销操作
    vue2.0 v-tap简洁(漏)版 (只解决300ms问题)
    JSONP原理小记
    前端模块加载规范AMD与CMD小记
    html状态码
    使用vue-cli开发时跨域问题
  • 原文地址:https://www.cnblogs.com/mvv118/p/4048104.html
Copyright © 2011-2022 走看看