Overriding the window.onscroll function

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

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 return 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 return 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.

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">
        w3wiki
    </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:

Output

How to disable scrolling temporarily using JavaScript ?

We know as long as the height of the web page gets increased it shows the scroll and we are going to discuss how can we disable that scrolling behavior temporarily using JavaScript.

Scrolling can be disabled using JavaScript using 2 methods:

Table of Content

Overriding the window.onscroll function
Setting the height of the body to 100% and overflow to hidden

Tags:

#javaScript #JavaScript-Questions #Web technologies #JavaScript #Web Technologies

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

Overriding the window.onscroll function

html

How to disable scrolling temporarily using JavaScript ?

Similar Reads

Contact Us