如何使用 JavaScript 暂时禁用滚动？

可以使用 JavaScript 使用 2 种方法禁用滚动：

方法一：覆盖window.onscroll函数

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

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

同样，使用window.pageXOffset和document.documentElement.scrollLeft值可以找到从左侧开始的当前滚动位置。这 2 个属性返回当前 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函数

  

    How to disable scrolling 
      temporarily using JavaScript?
    
        .scrollable-place {
            height: 1000px;
        }
    

  

    
      GeeksforGeeks
  
  
    How to disable scrolling temporarily
      using JavaScript?
    Click on the buttons below to enable or disable scrolling.
  
    
        Disable Scrolling
        Enable Scrolling
    
  
    
        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() {};
        }
    

  

输出：

方法二：设置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%，溢出为隐藏

  

    How to disable scrolling
      temporarily using JavaScript?
    
        .scrollable-place {
            height: 1000px;
        }
          
        .stop-scrolling {
            height: 100%;
            overflow: hidden;
        }
    

  

    GeeksforGeeks
    How to disable scrolling temporarily using JavaScript?
    
    Click on the buttons below to enable or disable scrolling.
    
    
        Disable Scrolling
        Enable Scrolling
    
  
    
        function disableScroll() {
            document.body.classList.add("stop-scrolling");
        }
  
        function enableScroll() {
            document.body.classList.remove("stop-scrolling");
        }
    

  

输出：

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。