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
Setting the height of the body to 100% and overflow to hidden

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.

[GFGTABS]

html

<!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>

[/GFGTABS]

Output:

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.

[GFGTABS]

html

<!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>

[/GFGTABS]

Output:

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.

Save or share this article