函数节流scroll，兼容火狐滚轮事件

最新推荐文章于 2021-07-26 10:58:46 发布

转载最新推荐文章于 2021-07-26 10:58:46 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaosuibu/p/8196110.html

文章标签：

#javascript #ViewUI

本文介绍了一种在JavaScript中实现函数节流的方法，并展示了如何应用此方法来处理不同浏览器下的滚轮事件。通过使用节流技术，可以有效减少滚轮事件触发频率过高导致的性能问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    //函数节流
    var wheelTimeout;
    var wheelFun = function (func) {
        if (wheelTimeout) {
            return;
        }
        func();
        wheelTimeout = setTimeout(function () {
            wheelTimeout = 0;
        }, 1000);
    };

//如果是火狐浏览器就mousewheelevt=DOMMouseScroll;否则mousewheelevt=mousewheel,因为火狐绑定滚轮事件是DOMMouseScroll

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";

    function mousewheelEvent(e, delta) {
        //console.log("delta==", delta);
        wheelFun(function () {
            mosewheelFun(e, delta);
        });
    }

    //判断是否是IE,IE的监听
    if (document.attachEvent) {
        document.attachEvent("on" + mousewheelevt, function (e) {
            mousewheelEvent(e, e.wheelDelta);
        });
    } else if (document.addEventListener) {
        //FireFox(DOMMouseScroll)、Chrome、Opera、safari
        document.addEventListener(mousewheelevt, function (e) {
            e = e || window.event;
            if (e.detail) {
                //Firefox
                mousewheelEvent(e, e.detail * 40);
            } else if (e.wheelDelta) {
                mousewheelEvent(e, -e.wheelDelta);
            }
        }, false);
    }

转载于:https://www.cnblogs.com/xiaosuibu/p/8196110.html