Skip to content
Related Articles

Related Articles

How to Configure Mouse Wheel Speed Across Browsers using JavaScript ?
  • Last Updated : 31 Mar, 2020
GeeksforGeeks - Summer Carnival Banner

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:




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

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:




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




    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.

  • Program:




    <!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>
  • Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :