EN
JavaScript - stop page scroll with e.preventDefault()
4 points
In this short article, we would like to show how to use e.preventDefault() to stop onscroll event with JavaScript.
Quick solution:
xxxxxxxxxx1
var handleScroll = function() {2
element.scrollTo(0, 0); // required when scroll bar is drgged3
};4
5
element.addEventListener('scroll', handleScroll, false);6
7
var handleEvent = function(e) {8
e.preventDefault(); // disables scrolling by mouse wheel and touch move9
};10
11
element.addEventListener('scroll', handleEvent, false);12
element.addEventListener('mousewheel', handleEvent, false);13
element.addEventListener('touchmove', handleEvent, false);Note: go to this article to see pure CSS.
Depending on what device we use, we need to handle scrolling occurred by mouse wheel, scrollbar dragging and touch moving.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#container {7
border: 1px solid red;8
height: 200px;9
overflow: auto; /* prevents element content overflowing to outside */10
}11
12
</style>13
</head>14
<body>15
<div id="container">16
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />17
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />18
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />19
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />20
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />21
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />22
</div>23
<script>24
25
var element = document.querySelector('#container');26
27
var handleScroll = function() {28
element.scrollTo(0, 0); // required when scroll bar is drgged29
};30
31
element.addEventListener('scroll', handleScroll, false);32
33
var handleEvent = function(e) {34
e.preventDefault(); // disables scrolling by mouse wheel and touch move35
};36
37
element.addEventListener('scroll', handleEvent, false);38
element.addEventListener('mousewheel', handleEvent, false);39
element.addEventListener('touchmove', handleEvent, false);40
41
</script>42
</body>43
</html>