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

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

对于IE、Safari和Chrome

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

示例：

JavaScript代码

var wheelDistance = function(evt) {
    // wheelDelta indicates how
    // Far the wheel is turned
    var w = evt.wheelDelta;
         
    // Returning normalized value
    return w / 120;
}
 
// Adding event listener for some element
somEl.addEventListener("mousewheel", wheelDistance);

Firefox

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

示例：

var wheelDistance = function(evt) {
    // Detail describes the scroll precisely
    // Positive for downward scroll
    // Negative for upward scroll
    var d = evt.detail;
         
    // Returning normalized value
    return -d / 3;
}
 
// Adding event listener for some element
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 & other browsers
    return w / 120;
}
 
// Adding event listeners for some element in DOM
someEl.addEventListener("mousewheel", handleScroll);
someEl.addEventListener("DOMMouseScroll", handleScroll);

示例： 让我们来看一个示例，在这个示例中，我们将使用上面规范化的函数来配置网页的滚动速度。在我们的情况下，我们将使用JavaScript库中提供的animate函数。 jQuery 。这个函数可以对一组数字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>A Computer Science Portal for Geeks</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 & other browsers
            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>