Question

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

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

Answer 1

编辑试试这个：

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

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

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

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

Answer 2

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

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

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

较旧的浏览器（最明显的是IE）也可能会显示水平滚动条，如果是这种情况，您可能需要设置overflow-x: hidden。

另请参阅：CSS div element - how to show horizontal scroll bars only?了解有关滚动条的更多信息。

Answer 3

这是香草JS版本：

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

Answer 4

这是我在此处发布的答案的副本：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 }));
  }
}

工作原理：

要在保存当前位置的同时禁用滚动，请运行disableBodyScroll({ savePosition: true })。
该功能检查页面是否已加载（因为用户可能在加载过程中触发对话框打开）。
如果页面已加载，则通过在margin-top上设置body来保存当前滚动位置，然后在页面上设置position: fixed; overflow-y: scroll来删除滚动条。
如果未加载页面，则会在页面加载时添加事件监听器以运行（3。）。

要启用滚动，所有操作都是相同的，但是该功能会删除样式，而不是设置样式。

Source of the code，因此可以像这样使用它们：

npm install --save @funboxteam/diamonds

import { enableBodyScroll, disableBodyScroll } from '@funboxteam/diamonds';

如何暂时锁定网页的滚动？

4 个答案: