Languages
[Edit]
EN

JavaScript - change mouse wheel speed

7 points
Created by:
Jun-L
413

In this short article, we would like to show how to change default mouse wheel speed affecting to scroll speed using pure JavaScript.

The solution uses the following steps:

  1. handles mouse wheel event,
  2. prevents default wheel action,
  3. multiply scroll delta by the coefficient,
  4. calculates and uses a new scroll position. 

Example solution:

function changeWheelSpeed(container, speedY) {
	var scrollY = 0;

	var handleScrollReset = function() {
		scrollY = container.scrollTop;
	};
	var handleMouseWheel = function(e) {
		e.preventDefault();
		scrollY += speedY * e.deltaY
		if (scrollY < 0) {
			scrollY = 0;
		} else {
			var limitY = container.scrollHeight - container.clientHeight;
			if (scrollY > limitY) {
				scrollY = limitY;
			}
		}
		container.scrollTop = scrollY;
	};

	container.addEventListener('mouseup', handleScrollReset, false);
	container.addEventListener('mousedown', handleScrollReset, false);
	container.addEventListener('mousewheel', handleMouseWheel, false);

	var removed = false;

	return function() {
		if (removed) {
			return;
		}

		container.removeEventListener('mouseup', handleScrollReset, false);
		container.removeEventListener('mousedown', handleScrollReset, false);
		container.removeEventListener('mousewheel', handleMouseWheel, false);

		removed = true;
	};
}


// Usage example:

var element = document.querySelector('#my-element');

changeWheelSpeed(element, 0.5);  // 0.5 * default_scroll_speed - 2 times slower

 

Practical example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div.container {
    	border: 1px solid red;
      	height: 120px;
      	overflow: auto;  /* enables scrollbar */
    }
    
  </style>
  <script>

    function changeWheelSpeed(container, speedY) {
        var scrollY = 0;

        var handleScrollReset = function() {
            scrollY = container.scrollTop;
        };
        var handleMouseWheel = function(e) {
            e.preventDefault();
            scrollY += speedY * e.deltaY
            if (scrollY < 0) {
                scrollY = 0;
            } else {
                var limitY = container.scrollHeight - container.clientHeight;
                if (scrollY > limitY) {
                    scrollY = limitY;
                }
            }
            container.scrollTop = scrollY;
        };

        container.addEventListener('mouseup', handleScrollReset, false);
        container.addEventListener('mousedown', handleScrollReset, false);
        container.addEventListener('mousewheel', handleMouseWheel, false);

        var removed = false;

        return function() {
            if (removed) {
                return;
            }

            container.removeEventListener('mouseup', handleScrollReset, false);
            container.removeEventListener('mousedown', handleScrollReset, false);
            container.removeEventListener('mousewheel', handleMouseWheel, false);

            removed = true;
        };
    }

  </script>
</head>
<body>
  <div class="container">
    <script>
      
      for (var  i = 0; i < 100; ++i) {
          document.write('<p>default_scroll_speed</p>');
      }
      
    </script>
  </div>
  <div id="container-1" class="container">
    <script>
      
      for (var  i = 0; i < 100; ++i) {
          document.write('<p>0.05 * default_scroll_speed</p>');
      }
      
    </script>
  </div>
  <div id="container-2" class="container">
    <script>
      
      for (var  i = 0; i < 100; ++i) {
          document.write('<p>0.5 * default_scroll_speed</p>');
      }
      
    </script>
  </div>
  <div id="container-3" class="container">
    <script>
      
      for (var  i = 0; i < 100; ++i) {
          document.write('<p>2.0 * default_scroll_speed</p>');
      }
      
    </script>
  </div>
  <script>

    // Usage example:

    var container1 = document.querySelector('#container-1');
    var container2 = document.querySelector('#container-2');
    var container3 = document.querySelector('#container-3');

    changeWheelSpeed(container1, 0.05);  // 0.05 * default_scroll_speed
    changeWheelSpeed(container2, 0.5);   // 0.5  * default_scroll_speed
    changeWheelSpeed(container3, 2.0);   // 1.5  * default_scroll_speed

  </script>
</body>
</html>

 

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join