如何使用JavaScript在不同浏览器中配置鼠标滚轮速度

鼠标滚轮的滚动速度因为浏览器的选择而有所不同，即使DOM事件和方法来改变滚动速度也不相同。为了在网页上提供缩放和动画效果，通常需要配置鼠标速度。可以通过规范化鼠标滚轮滚动的距离来控制滚动速度。有多种技术可以在不同的浏览器中更改鼠标滚轮的速度。

对于IE、Safari和Chrome： 当鼠标滚轮或类似设备操作时，将触发鼠标滚轮事件。下面的函数可以用来控制鼠标滚轮的速度。规范化的距离可以在Web API的函数中，如 animate，translate 中使用，以提供不同的转换和动画效果。

示例：

var wheelDistance = function(evt) {
    // wheelDelta表示滚轮转动的距离
    var w = evt.wheelDelta;
         
    // 返回规范化的值
    return w / 120;
}
 
// 为某个元素添加事件监听器
somEl.addEventListener("mousewheel", wheelDistance);

Firefox： 在Firefox中，当操作鼠标滚轮时会触发 DOMMouseScroll 事件。与上面的情况类似，下面的函数返回的规范化距离可以在 animate 函数中使用，以提供不同的转换效果。

示例：

var wheelDistance = function(evt) {
    // Detail描述了具体的滚动
    // 下滚返回正数
    // 上滚返回负数
    var d = evt.detail;
         
    // 返回规范化的值
    return -d / 3;
}
 
// 为某个元素添加事件监听器
var speed = somEl.addEventListener(
    "DOMMouseScroll", wheelDistance);

示例： 我们还可以创建一个函数，以规范化不同浏览器的鼠标滚轮/触摸板滚动速度，并且一个函数可以适用于多个浏览器。

function wheelDistance(e) {
if (!e) {
        e = window.event;
}
    let w = e.wheelDelta,
        d = e.detail;
    if (d) {
        return -d / 3; // Firefox;
    }
 
    // IE, Safari, Chrome和其他浏览器
    return w / 120;
}
 
// 在DOM中的某个元素上添加事件监听器
someEl.addEventListener("mousewheel", handleScroll);
someEl.addEventListener("DOMMouseScroll", handleScroll);

示例： 让我们看一个例子，在这个例子中，我们将使用上述规范化函数配置我们网页的滚动速度。我们将在我们的HTML页面上使用jQuery这个JavaScript库中提供的animate函数。这个函数对一组数字类型的CSS属性（如margin、scrollTop等）执行自定义动画。这个函数连同我们上面定义的规范化函数将为我们的HTML页面提供流畅的滚动效果。

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
        div {
            text-align: center;
            height: 1200px;
        }
     
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>
 
<body>
    <div id="my-div">
    <h1>GeeksforGeeks</h1>
    <b>计算机科学门户网站</b>
    </div>
 
    <script type="text/javascript">
        window.addEventListener("DOMMouseScroll", handleScroll);
        window.addEventListener("mousewheel", handleScroll);
 
        function wheelDistance(e) {
            console.log(e);
            if (!e) {
                e = window.event;
            }
            var w = e.wheelDelta,
                d = e.detail;
            if (d) {
                return -d / 3; // Firefox;
            }
 
            // IE, Safari, Chrome 和其他浏览器
            return w / 120;
        }
 
        function handleScroll(e) {
            var delta = wheelDistance(e);
            console.log(delta);
            var time = 1000;
            var distance = 200;
 
             $('html, body').stop().animate({ scrollTop:$ (window).scrollTop()
                        - (distance * delta)
            }, time);
        }
    </script>
</body>
</html>

输出：

如何使用JavaScript在不同浏览器中配置鼠标滚轮速度