Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Configure Mouse Wheel Speed Across Browsers using JavaScript?
We can use JavaScript to change the behavior of the web page. Every browser has a default scrolling speed when users scroll using the mouse wheel. However, we can control it using JavaScript.
We can also use the mouse wheel to zoom in and out of web pages. In such cases, we require to reduce the mouse wheel speed. Furthermore, developers sometimes require a scrolling speed limit, such as on website rules, so that users can read it properly.
In this tutorial, we will learn different ways to control the mouse's wheel speed.
Syntax
Users can follow the syntax below to use the ‘wheel’ event to configure mouse wheel speed across browsers using JavaScript.
content.addEventListener("wheel", (event) => {
let deltaY = event.deltaY;
content.scrollTop += deltaY / n;
});
We take the current scrolling speed using the deltaY property in the above syntax. After that, we divide the current scrolling speed by n to change the scrolling speed. Developers should increase the value of n to decrease the scrolling speed and decrease the value of n to increase the scrolling speed.
Example 1 (Using the Wheel Event)
In the example below, we have created the content div element and added the text content. In CSS, we have set the dimensions of the div element and set the overflow scroll to make the div scrollable.
In JavaScript, we used the addEventListner() method to fire the ‘wheel’ event and get the current scrolling speed. After that, we have decreased the scrolling speed by 50 times. In the output, users can try to scroll through the div element and observe the slow scrolling speed.
<html>
<head>
<style>
#content {
height: 300px;
width: 300px;
overflow-y: scroll;
padding: 10px;
font-size: 20px;
font-family: Arial, sans-serif;
background-color: pink;
}
</style>
</head>
<body>
<h3> Using the <i> wheel event listener </i> to change the mouse wheel scroll speed </h3>
<div id = "content">
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
</div>
<script>
const content = document.getElementById("content");
content.addEventListener("wheel", (event) => {
event.preventDefault();
// getting the scrolling speed.
let deltaY = event.deltaY;
// decreasing the scrolling speed by 50 times
let speed = deltaY / 50;
// scrolling the content of the div element
content.scrollTop += speed;
});
</script>
</body>
</html>
Example 2 (Using the Mousewheel Event For Chrome Browser)
In the example below, we have used the ‘mousewheel’ event. When users use the mouse wheel to scroll the web page in the Chrome browser, it fires the ‘mousewheel’ event.
Here, we have multiplied the current scrolling speed by 0.03 to decrease the scrolling speed by 97%. However, it is very similar to the ‘wheel’ event.
<html>
<head>
<style>
#content {
height: 200px;
width: 200px;
overflow-y: scroll;
padding: 10px;
font-size: 60px;
font-family: Arial, sans-serif;
background-color: aqua;
}
</style>
</head>
<body>
<h3> Using the <i> mousewheel event listener </i> to change the mouse wheel scroll speed in Chrome browser </h3>
<div id = "content"> Scroll This div using the mouse wheel. </div>
<script>
const content = document.getElementById("content");
content.addEventListener("mousewheel", (event) => {
event.preventDefault();
const deltaY = event.deltaY;
content.scrollTop += deltaY * 0.03;
});
</script>
</body>
</html>
Example 3 (Using the DomMouseScroll Event for Firefox Browser)
In the example below, we have used the ‘DomMouseScroll’ event. The Firefox browser only supports it but not other browsers such as Chrome, opera, etc.
We used the ‘detail’ property of the event to get the current scrolling speed and multiplied it by 0.5 to reduce the scrolling speed by half. Users can open the below web page in the Firefox browser the observe the change in the scrolling speed of the div element.
<html>
<head>
<style>
#content {
height: 200px;
width: 200px;
overflow-y: scroll;
padding: 10px;
font-size: 40px;
background-color: green;
}
</style>
</head>
<body>
<h3> Using the <i> DOMMouseScroll event listener </i> to change the mouse wheel scroll speed in Chrome browser </h3>
<div id = "content"> Scroll down or up with the mouse wheel inside the div to see the effect. </div>
<script>
const content = document.getElementById("content");
content.addEventListener("DOMMouseScroll", (event) => {
event.preventDefault();
const deltaY = event.detail;
content.scrollTop += deltaY * 0.5;
});
</script>
</body>
</html>
Example 4 (Customizing the Mouse Wheel Speed From the Web Page)
In the example below, we allow users to change the mouse wheel scrolling speed from the web browser. We have created the range slider that takes the input between 1 and 50. Users can change the value of the range slider.
After that, whenever users scroll the div element, JavaScript sets the scrolling speed according to the selected value in the range slider.
<html>
<head>
<style>
#content {
height: 200px;
width: 200px;
overflow-y: scroll;
padding: 10px;
font-size: 20px;
font-family: Arial, sans-serif;
background-color: aqua;
}
</style>
</head>
<body>
<h3> Using the <i> wheel event listener </i> to change the mouse wheel scroll speed </h3>
<div id = "content"> Git is a distributed version control system used to manage source code and other files. It allows developers to track changes to their codebase over time, collaborate with others, and easily revert to previous versions if necessary. Git is widely used in software development and has become an essential tool for modern programming teams. </div>
<!-- adding input range for mouse scroll -->
<input type = "range" min = "3" max = "50" value = "20" id = "myRange" />
<script>
const content = document.getElementById("content");
content.addEventListener("wheel", (event) => {
event.preventDefault();
let value = document.getElementById("myRange").value;
let deltaY = event.deltaY;
if (deltaY > 0) {
deltaY = value;
} else if (deltaY < 0) {
deltaY = -value;
}
content.scrollTop += deltaY;
});
</script>
</body>
</html>
Users learned to control the mouse wheel scrolling speed across browsers using JavaScript. This tutorial used three events to configure the mouse wheel speed. The first event is the ‘wheel’ event which is compatible with all browsers. The second event is ‘mousewheel’, compatible with all browsers except Firefox. The third event is ‘DOMMouseScroll’, which is only compatible with Firefox.
4K+ Views
To Continue Learning Please Login