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

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

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

编辑:如果要在对话框中滚动,可以在overflow: auto那里设置,并在该元素上设置高度.

较旧的浏览器(最值得注意的是IE)也可能显示水平滚动条,overflow-x: hidden如果是这种情况,您可能需要设置.

另见:CSS div元素 - 如何只显示水平滚动条？有关滚动条的更多信息.

Answer 3

这是普通的 JS 版本：

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