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 disable arrow key in textarea 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 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 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 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 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 Like