JavaScript 如何临时禁用滚动

可以使用JavaScript来禁用滚动的方法有两种：

方法1：覆盖window.onscroll函数

window.onscroll 事件在窗口滚动时触发。覆盖此函数并在每次滚动发生时将其设置为固定位置将有效地禁用滚动效果。

通过使用 window.pageYOffset 和 document.documentElement.scrollTop 的值可以找到当前离顶部的滚动位置。这两个属性返回当前y轴滚动位置。它们一起使用OR运算符，因为其中一个可能在某些浏览器上返回0。

类似地，通过使用 window.pageXOffset 和 document.documentElement.scrollLeft 的值可以找到当前离左侧的滚动位置。这两个属性返回当前的x轴滚动位置。然后，使用这两个值与 window.scrollTo() 方法一起设置当前页面的滚动位置。要恢复滚动，将window.onscroll覆盖为一个空函数。这将再次启用页面的滚动。

伪代码：

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

示例：

覆盖window.onscroll函数

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

输出：

JavaScript 如何临时禁用滚动

方法2：将body的高度设置为100％并将溢出设置为隐藏

在这种方法中，创建了一个新的CSS类，其中将高度设置为100％，并通过将溢出属性设置为隐藏来禁用滚动条。

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

每当需要禁用滚动时，使用 document.body.classList.add(“classname”) 方法将此类添加到元素中。此方法将指定的类名添加到body元素的类列表中。

要恢复滚动的功能，使用 document.body.classList.remove(“classname”) 方法从元素中删除此类。此方法从body元素的类列表中删除指定的类名。这将再次启用页面的滚动。

伪代码：

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

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

示例： 将body的高度设置为100%，并将overflow设置为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>

输出：

JavaScript 如何临时禁用滚动