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:
xxxxxxxxxx1
function changeWheelSpeed(container, speedY) {2
var removed = false;3
var scrollY = 0;4
var handleScrollReset = function() {5
scrollY = container.scrollTop;6
};7
var handleMouseWheel = function(e) {8
e.preventDefault();9
scrollY += speedY * e.deltaY10
if (scrollY < 0) {11
scrollY = 0;12
} else {13
var limitY = container.scrollHeight - container.clientHeight;14
if (scrollY > limitY) {15
scrollY = limitY;16
}17
}18
container.scrollTop = scrollY;19
};20
container.addEventListener('mouseup', handleScrollReset, false);21
container.addEventListener('mousedown', handleScrollReset, false);22
container.addEventListener('mousewheel', handleMouseWheel, false);23
return function() {24
if (removed) {25
return;26
}27
container.removeEventListener('mouseup', handleScrollReset, false);28
container.removeEventListener('mousedown', handleScrollReset, false);29
container.removeEventListener('mousewheel', handleMouseWheel, false);30
removed = true;31
};32
}33
34
35
// Usage example:36
37
var element = document.querySelector('#my-element');38
39
changeWheelSpeed(element, 0.5); // 0.5 * default_scroll_speed // 2 times slower
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div.container {7
border: 1px solid red;8
height: 120px;9
overflow: auto; /* enables scrollbar */10
}11
12
</style>13
<script>14
15
function changeWheelSpeed(container, speedY) {16
var removed = false;17
var scrollY = 0;18
var handleScrollReset = function() {19
scrollY = container.scrollTop;20
};21
var handleMouseWheel = function(e) {22
e.preventDefault();23
scrollY += speedY * e.deltaY24
if (scrollY < 0) {25
scrollY = 0;26
} else {27
var limitY = container.scrollHeight - container.clientHeight;28
if (scrollY > limitY) {29
scrollY = limitY;30
}31
}32
container.scrollTop = scrollY;33
};34
container.addEventListener('mouseup', handleScrollReset, false);35
container.addEventListener('mousedown', handleScrollReset, false);36
container.addEventListener('mousewheel', handleMouseWheel, false);37
return function() {38
if (removed) {39
return;40
}41
container.removeEventListener('mouseup', handleScrollReset, false);42
container.removeEventListener('mousedown', handleScrollReset, false);43
container.removeEventListener('mousewheel', handleMouseWheel, false);44
removed = true;45
};46
}47
48
</script>49
</head>50
<body>51
<div id="container-0" class="container"><script> for (var i = 0; i < 100; ++i) document.write('<p> default_scroll_speed</p>'); </script></div>52
<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>53
<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>54
<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>55
<script>56
57
// Usage example:58
59
var container1 = document.querySelector('#container-1');60
var container2 = document.querySelector('#container-2');61
var container3 = document.querySelector('#container-3');62
63
changeWheelSpeed(container1, 0.05); // 0.05 * default_scroll_speed64
changeWheelSpeed(container2, 0.5); // 0.5 * default_scroll_speed65
changeWheelSpeed(container3, 2.0); // 1.5 * default_scroll_speed66
67
</script>68
</body>69
</html>
