How to Disable Scrolling Temporarily using JavaScript?
Last Updated :
10 Jan, 2025
Improve
Disabling scrolling temporarily using JavaScript means preventing users from scrolling a webpage during specific interactions, such as when a modal is open or a loading screen is displayed.
Scrolling can be disabled using JavaScript using 2 methods:
Table of Content
Using window.onscroll function
- The window.onscroll event triggers on page scroll; overriding it and using window.scrollTo() sets a fixed scroll position, disabling scroll effects.
- window.pageYOffset and document.documentElement.scrollTop provide the vertical scroll position, while window.pageXOffset and document.documentElement.scrollLeft provide the horizontal scroll position.
- To re-enable scrolling, override window.onscroll with a blank function.
Example: This example shows the implementation of the above-explained approach.
<!DOCTYPE html>
<html>
<head>
<title>
How to disable scrolling
temporarily using JavaScript?
</title>
<style>
.scrollable-place {
height: 1000px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to disable scrolling temporarily
using JavaScript?
</b>
<p>Click on the buttons below to
enable or disable scrolling.</p>
<p class="scrollable-place">
<button onclick="disableScroll()">
Disable Scrolling</button>
<button onclick="enableScroll()">
Enable Scrolling</button>
</p>
<script>
function disableScroll() {
// Get the current page scroll position
scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop;
scrollLeft =
window.pageXOffset ||
document.documentElement.scrollLeft,
// if any scroll is attempted,
// set this to the previous value
window.onscroll = function () {
window.scrollTo(scrollLeft, scrollTop);
};
}
function enableScroll() {
window.onscroll = function () { };
}
</script>
</body>
</html>
Output:
.gif)
Setting the height of the body to 100% and overflow to hidden
- In this Create a CSS class with height: 100% and overflow: hidden to disable scrolling.
- Add this class to the body with document.body.classList.add("classname") to disable scrolling.
- Remove the class with document.body.classList.remove("classname") to re-enable scrolling.
Example:This example shows the implementation of the above-explained approach.
<!DOCTYPE html>
<html>
<head>
<title>
How to disable scrolling
temporarily using JavaScript?
</title>
<style>
.scrollable-place {
height: 1000px;
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to disable scrolling
temporarily using JavaScript?</b>
<p>Click on the buttons below to
enable or disable scrolling.</p>
<p class="scrollable-place">
<button onclick="disableScroll()">
Disable Scrolling</button>
<button onclick="enableScroll()">
Enable Scrolling</button>
</p>
<script>
function disableScroll() {
document.body.classList.
add("stop-scrolling");
}
function enableScroll() {
document.body.classList
.remove("stop-scrolling");
}
</script>
</body>
</html>
Output:
.gif)
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.