How to Configure Mouse Wheel Speed Across Browsers using JavaScript ?

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 of the wheel has traveled. There are various techniques to change the speed of the mouse wheel in different web browsers.

For IE, Safari, Chrome: The mousewheel 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.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    var wheelDistance = function(evt) {
          
        // wheelDelta inidicates 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);

    chevron_right

    
    

Firefox: In Firefox, the DOMMouseScroll event is fired when mousewheel is operated. As in above case, normalized distance returned by the below function can be used in animate function to provide different transformations.



  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Program: 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            h1 {
                color: green;
            }
            div {
                text-align: center;
                height: 1200px;
            }
            
        </style>
        <script src=
        </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>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.