How to disable scrolling temporarily using JavaScript?

26 Jul, 2021
Scrolling can be disabled using JavaScript using 2 methods:
Method 1: Overriding the window.onscroll function
The window.onscroll event fires when the window has been scrolled. Overriding this function and setting it to a fixed position every time the scroll happens will effectively disable the scroll effect.
The current scroll position from the top is found by using the window.pageYOffset and the document.documentElement.scrollTop values. These 2 properties returns the current y scroll position. They are used together using the OR operator as one of them may return 0 on certain browsers.
Similarly, the current scroll position from the left is found by using the window.pageXOffset and the document.documentElement.scrollLeft values. These 2 properties returns the current x scroll position.
The window.scrollTo() method is then used with these 2 values to set the scroll position of the current page to that value.
To enable the scrolling back, window.onscroll is overridden with a blank function. This will enable the scrolling of the page again.
Syntax:
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() {};}
Example: Overriding the window.onscroll function
<!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:
Method 2: Setting the height of the body to 100% and overflow to hidden
In this method, a new CSS class is created where the height is set to 100% and the scroll bar is disabled by setting the overflow property to hidden.
.stop-scrolling {    height: 100%;    overflow: hidden;}
Whenever scrolling has to be disabled, this class is added to the body using the document.body.classList.add(“classname”) method. This method adds the specified class name to the body element’s class list.
To enable the scrolling back, this class is removed from the body using the document.body.classList.remove(“classname”) method. This method removes the specified class name to the body element’s class list. This will enable the scrolling of the page again.
Syntax:
function disableScroll() {    document.body.classList.add("stop-scrolling");}  function enableScroll() {    document.body.classList.remove("stop-scrolling");}
Example: Setting the height of the body to 100% and overflow to hidden
<!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:
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.
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?