How to disable scrolling temporarily using JavaScript?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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() {};
}

chevron_right


Example: Overriding the window.onscroll function

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
onscroll

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

function disableScroll() {
    document.body.classList.add("stop-scrolling");
}
  
function enableScroll() {
    document.body.classList.remove("stop-scrolling");
}

chevron_right


Example: Setting the height of the body to 100% and overflow to hidden

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
overflow-hidden



My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.