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 elementsomEl.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 elementvar 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 DOMsomeEl.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= </script></head><body> <div id="my-div"> <h1>neveropen</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:
