如何使用 JavaScript 跨浏览器配置鼠标滚轮速度？

鼠标滚轮的滚动速度随着浏览器的选择而不同，甚至改变滚动速度的 DOM 事件和方法也不相同。要在网页上提供缩放和动画效果，通常需要配置鼠标速度。车轮的速度可以通过标准化车轮已行驶的距离来控制。有多种技术可以在不同的 Web 浏览器中改变鼠标滚轮的速度。
对于 IE、Safari、Chrome：当鼠标滚轮或类似设备被操作时触发 mousewheel 事件。下面的函数可以用来控制鼠标滚轮的速度。标准化的距离可用于动画、Web API 的翻译等功能，以提供不同的转换和动画。

程序：

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);

javascript

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);

javascript

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);

html




    
    

 

    
      GeeksforGeeks
      A Computer Science Portal for Geeks

Firefox：在 Firefox 中，操作鼠标滚轮时会触发DOMMouseScroll事件。与上述情况一样，以下函数返回的归一化距离可用于animate函数以提供不同的转换。

程序：

javascript

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);

程序：我们还可以为各种浏览器制作一个可以使鼠标滚轮/触控板的滚动速度标准化的函数，一个函数将为各种浏览器服务。

javascript

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);

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

程序：

html




    
    

 

    
      GeeksforGeeks
      A Computer Science Portal for Geeks

输出：