How to Configure Mouse Wheel Speed Across Browsers using JavaScript ?

0 0 2 minutes read

The mouse wheel’s scrolling speed varies with the choice of the web browser, even the DOM events and methods to change the scrolling speed are not the same. To provide zoom and animation on a web page, it is generally required to configure mouse speed. The speed of the wheel can be controlled by normalizing the distance the wheel has traveled. There are various techniques to change the speed of the mouse wheel in different web browsers.

For IE, Safari, and Chrome: The mouse wheel event is fired when a mouse wheel or similar device is operated. The below function can be used to control the speed of the mouse wheel. The normalized distance can be used in functions like animate, translate of the Web API to provide different transformations and animations.

Example:

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: In Firefox, the DOMMouseScroll event is fired when the mouse wheel is operated. As in the above case, the normalized distance returned by the below function can be used in animate function to provide different transformations.

Example:

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

Example: We can also make a function that can normalize the scrolling speed of mousewheel/trackpad for various web browsers, and one function will serve the purpose for various browsers.

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

Example: Let’s see an example in which we will configure the scrolling speed for our webpage using the above-normalized function. We will use the animate function provided by jQuery a Javascript library in our case. This function performs a custom animation on a set of numerical CSS properties like margin, scrollTop, etc. This function along with the normalizing function we have defined above will provide a smooth scrolling effect on our HTML page.

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>zambiatek</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>