EN
JavaScript - change mouse wheel speed
7
points
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:
- handles mouse wheel event,
- prevents default wheel action,
- multiply scroll delta by the coefficient,
- 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>