如何暂时锁定网页滚动

How to lock scrolling of a web page temporarily?

本文关键字：滚动 网页 锁定 何暂时      更新时间：2023-09-26

显示对话框时，如何临时锁定网页滚动？我有一个对话框，在停用覆盖网页的滚动后，我想在其中启用滚动。

是否有js命令暂时禁用滚动

编辑试试这个：

打开对话框时（删除滚动条并阻止用户滚动）：

  $('body').css({'overflow':'hidden'});
  $(document).bind('scroll',function () { 
       window.scrollTo(0,0); 
  });

对话框关闭时（允许用户再次滚动）：

 $(document).unbind('scroll'); 
  $('body').css({'overflow':'visible'});

您可以设置一个容器元素，甚至可以将主体设置为具有浏览器窗口宽度和高度的overflow: hidden。这样，任何溢出的内容都会从页面上掉下来，滚动条永远不会显示。这可以在像body.dialog-open { overflow: hidden; }这样的css语句中设置。然后，当对话框打开和关闭时，可以添加和删除.dialog-open类名。

如果在主体上设置此项，可能不需要宽度和高度，但我必须检查该项的浏览器兼容性。可能会得到一些意想不到的结果。

编辑：如果你想在对话框中滚动，你可以在那里设置overflow: auto，并在该元素上设置高度。

较旧的浏览器（尤其是IE）可能也会显示水平滚动条，如果是这样的话，您可能必须设置overflow-x: hidden。

另请参阅：CSSdiv元素-如何只显示水平滚动条？有关滚动条的更多信息。

这里是香草JS版本：

document.getElementsByTagName('body')[0].style.overflow = 'hidden';
...
document.getElementsByTagName('body')[0].style.overflow = 'visible' // the default for the css property

这是我在这里发布的答案的副本：https://stackoverflow.com/a/63221105/4336168

我使用这两个功能：

function enableBodyScroll() {
  if (document.readyState === 'complete') {
    document.body.style.position = '';
    document.body.style.overflowY = '';
    if (document.body.style.marginTop) {
      const scrollTop = -parseInt(document.body.style.marginTop, 10);
      document.body.style.marginTop = '';
      window.scrollTo(window.pageXOffset, scrollTop);
    }
  } else {
    window.addEventListener('load', enableBodyScroll);
  }
}
function disableBodyScroll({ savePosition = false } = {}) {
  if (document.readyState === 'complete') {
    if (document.body.scrollHeight > window.innerHeight) {
      if (savePosition) document.body.style.marginTop = `-${window.pageYOffset}px`;
      document.body.style.position = 'fixed';
      document.body.style.overflowY = 'scroll';
    }
  } else {
    window.addEventListener('load', () => disableBodyScroll({ savePosition }));
  }
}

工作原理：

  1. 如果要禁用滚动并保存当前位置，则运行disableBodyScroll({ savePosition: true })。

  2. 该功能检查页面是否已加载（因为用户可能会在加载过程中触发对话框打开）。

  3. 如果页面已加载，则通过在body上设置margin-top来保存当前滚动位置，然后在其上设置position: fixed; overflow-y: scroll以删除滚动条。

  4. 如果页面没有加载，它会在页面加载时添加要运行的事件侦听器（3.）。

为了启用滚动，一切都是一样的，但功能删除样式而不是设置它们。

代码的来源，所以它们可以这样使用：

npm install --save @funboxteam/diamonds

import { enableBodyScroll, disableBodyScroll } from '@funboxteam/diamonds';
相关文章：