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:
xxxxxxxxxx
1
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.deltaY
10
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
xxxxxxxxxx
1
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.deltaY
24
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_speed
64
changeWheelSpeed(container2, 0.5); // 0.5 * default_scroll_speed
65
changeWheelSpeed(container3, 2.0); // 1.5 * default_scroll_speed
66
67
</script>
68
</body>
69
</html>