CSS disable scroll wheel
Disabling the Scroll Wheel with CSS
In web development, sometimes we want to prevent users from using the scroll wheel to scroll the page. This may be because we want to achieve a specific interactive effect or to provide a better user experience. In this article, we will introduce how to use CSS to disable the scroll wheel function and provide some sample code to help readers better understand.
1. Using the overflow: hidden Property
We can prevent page scrolling by setting the overflow: hidden property. This way, even if the user tries to scroll the page using the scroll wheel, the page will not scroll. Here is a simple example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Scrolling Example</title>
<style>
body {
overflow: hidden;
}
</style>
</head>
<body>
<h1>Disable Scrolling Example</h1>
<p>This is a sample page with disabled scrolling. </p>
</body>
</html>
Output:
In the example above, we disable scrolling by setting the overflow property of the body element to hidden. Users can’t scroll the page using the scroll wheel, but they can still browse the page content through other means.
2. Using JavaScript Event Listeners
In addition to using CSS properties, we can also use JavaScript to listen for scroll wheel events and prevent the default behavior when an event occurs, thereby achieving the effect of disabling the scroll wheel. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Scroll Wheel Example</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<h1>Disable Scroll Wheel Example</h1>
<p>This is a sample page that disables the scroll wheel via JavaScript. </p>
<script>
window.addEventListener('wheel', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
Output:
In the above example, we use the JavaScript addEventListener method to listen for the wheel event (scroll wheel event) and call the preventDefault method when the event occurs to prevent the default behavior, thereby achieving the effect of disabling the scroll wheel.
3. Using the mousewheel Event
In addition to the wheel event, we can also use the mousewheel event to listen for scroll wheel events and prevent the default behavior when the event occurs. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Scroll Wheel Example</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<h1>Disable Scroll Wheel Example</h1>
This is an example page that disables the scroll wheel using the `mousewheel` event.
<script>
window.addEventListener('mousewheel', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
Output:
In the above example, we use the JavaScript addEventListener method to listen for the mousewheel event and call the preventDefault method when the event occurs to prevent the default behavior, thereby achieving the effect of disabling the scroll wheel.
4. Using the DOMMouseScroll Event
Some older browsers may not support the wheel or mousewheel events. In this case, you can use the DOMMouseScroll event to listen for scroll wheel events. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Scroll Wheel Example</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<h1>Disable Scroll Wheel Example</h1>
This is a sample page that disables the scroll wheel using the `DOMMouseScroll` event.
<script>
window.addEventListener('DOMMouseScroll', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
Output:
In the above example, we use JavaScript’s addEventListener method to listen for the DOMMouseScroll event and call the preventDefault method when the event occurs to prevent the default behavior, thereby achieving the effect of disabling the scroll wheel.
5. Using the onmousewheel Attribute
In addition to using the addEventListener method, we can also use the onmousewheel attribute directly on an element to listen for mouse wheel events. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Scroll Wheel Example</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body onmousewheel="return false;">
<h1>Disable Scroll Wheel Example</h1>
This is an example page that disables the scroll wheel using the `onmousewheel` attribute.
</body>
</html>
Output:
In the above example, we use the onmousewheel attribute directly on the body element and set it to return false; to prevent the default behavior of the scroll wheel event, thereby disabling the scroll wheel.
6. Use the addEventListener Method to Listen for Scroll Wheel Events
In addition to the method described above, we can also use the addEventListener method to listen for scroll wheel events and determine the scroll wheel direction when an event occurs, thereby disabling the scroll wheel. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Scroll Wheel Example</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<h1>Disable Scroll Wheel Example</h1>
<p>This is a sample page that disables scroll wheel by determining the scroll wheel direction. </p>
<script>
window.addEventListener('wheel', function(e) {
if (e.deltaY > 0) {
e.preventDefault();
}
});
</script>
</body>
</html>
Output:
In the above example, we use JavaScript’s addEventListener method to listen for the wheel event. When the event occurs, we check the value of e.deltaY (the direction of the wheel scroll). If it is positive (scrolling downward), we call the preventDefault method to prevent the default behavior, thereby disabling the wheel scrolling.
7. Using the onwheel Attribute
In addition to using the addEventListener method, we can also use the onwheel attribute directly on an element to listen for wheel events. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Scroll Wheel Example</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body onwheel="return false;">
<h1>Disable Scroll Wheel Example</h1>
This is an example page that disables the scroll wheel using the `onwheel` attribute.
</body>
</html>
Output:
In the example above, we use the onwheel attribute directly on the body element and set it to return false; to prevent the default behavior of the scroll wheel event, thereby achieving the effect of disabling the scroll wheel.
8. Using the touchmove Event
On mobile devices, users may use touch to scroll the page. We can also prevent page scrolling by listening for the touchmove event. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Scroll Wheel Example</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<h1>Disable Scroll Wheel Example</h1>
This is a sample page that disables the scroll wheel via the `touchmove` event.
<script>
window.addEventListener('touchmove', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
Output:
In the above example, we use the JavaScript addEventListener method to listen for the touchmove event and call the preventDefault method when the event occurs to prevent the default behavior, thereby achieving the effect of disabling the scroll wheel.
9. Using the ontouchmove Attribute
Similar to the onwheel attribute, we can also use the ontouchmove attribute directly on an element to listen for touch and move events and prevent the default behavior. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Scroll Wheel Example</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body ontouchmove="return false;">
<h1>Disable Scroll Wheel Example</h1>
This is a sample page that disables the scroll wheel using the `ontouchmove` attribute.
</body>
</html>
Output:
In the example above, we use the ontouchmove attribute directly on the body element and set it to return false; to prevent the default behavior of the touchmove event, thereby preventing the scrollwheel from appearing.
10. Using the document.addEventListener Method
In addition to listening for events on specific elements, we can also use the document.addEventListener method to listen for scrollwheel events on the entire document and prevent the default behavior. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Scroll Wheel Example</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<h1>Disable Scroll Wheel Example</h1>
This is a sample page that uses the `document.addEventListener` method to disable the scroll wheel.
<script>
document.addEventListener('wheel', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
Output:
In the above example, we use the document.addEventListener method to listen for the wheel event on the entire document and call the preventDefault method when the event occurs to prevent the default behavior, thereby achieving the effect of disabling the scroll wheel.