How to Disable Scrolling Temporarily using JavaScript? Last Updated : 12 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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 ContentUsing window.onscroll functionSetting the height of the body to 100% and overflow to hidden Using window.onscroll functionThe 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. 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> Output: OutputSetting 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. 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> Output:OutputJavaScript 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. Comment More infoAdvertise with us Next Article How to set smooth scroll after clicking the link using JavaScript ? S sayantanm19 Follow Improve Article Tags : JavaScript Web Technologies Web technologies javaScript JavaScript-Questions +1 More Similar Reads How to disable arrow key in textarea using JavaScript ? Given an HTML element containing the <textarea> element and the task is to disable scrolling through arrow keys with the help of JavaScript. Approach 1: Add an event listener onkeydown on the window.If the event happens then check if the keys are arrow or not.If arrow key is pressed then preve 3 min read How to Scroll to an Element Inside a Div using JavaScript? To scroll to an element within a div using JavaScript, set the parent div's scrollTop`to the target element's offsetTop. This method allows smooth navigation within a scrollable container. Below are the methods to scroll to an element inside a Div using JavaScript:Table of Content Using scrollIntoVi 3 min read How to set smooth scroll after clicking the link using JavaScript ? Smooth scroll provides a seamless user experience as it provides an effective way to enhance website navigation. By implementing smooth scroll functionality, one can ensure that users transition fluidly between different sections of your webpage when they click on internal links.There are several me 4 min read How to animate scrollTop using jQuery ? The scrollTop property in JavaScript is used to set or return the vertical scrollbar position of any element. Setting the scrollTop to any value will make the page scroll to that location. The scroll by default takes place immediately and abruptly scrolls to the value. This scrolling can be animated 3 min read How to disable scrollbar without hiding using jQuery ? A vertical or horizontal bar that is located at the corners of the page helps us to scroll the pages or containers upwards, downwards or sideways. So, the process is to disable the scroll bar but the scroll bar should be visible. In this article, we will disable the scroll bar by using .on() functio 2 min read How to Get and Set Scroll Position of an Element using JavaScript ? In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of 3 min read Like