如何锁定网页的临时滚动？ [英] How to lock scrolling of a web page temporarily?

问题描述

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

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

解决方案

您可以使用浏览器的宽度和高度来设置一个容器元素，或者甚至可以将body设置为 overflow：hidden 窗口。这样，任何溢出的内容都将脱离页面，滚动条从不显示。这可以在像 body.dialog-open {overflow：hidden; } 。然后，您可以在对话框打开并关闭时添加和删除 .dialog-open classname。

宽度和身高可能不是必需的，但我必须检查浏览器兼容性。

edit：
如果你想在对话框中滚动，你可以设置 overflow：auto


旧版浏览器（最值得注意的是IE）也可能会显示一个水平滚动条，您可能需要设置，并在该元素上设置高度。

code> overflow-x：hidden 如果是这种情况。

另请参阅： CSS div元素 - 如何仅显示水平滚动条？以获取滚动条的更多信息。

How can I lock scrolling of a webpage temporarily when a dialog box is displayed ? I have a dialog box within which I want to enable scrolling after deactivating scrolling from the overlayed webpage.

Is there a js command to temporarily disable scrolling ?

解决方案

You could set a container element or maybe even the body to overflow: hidden with a width and height of the browser window. This way any overflowing content will fall off the page and scroll bars are never displayed. This can be set in a css statement like body.dialog-open { overflow: hidden; }. You can then add and remove the .dialog-open classname when the dialog opens and closes.

The width and height might not be required if setting this on the body, but I'd have to check browser compatibility on that one. Might get some unexpected results there.

edit: If you want scrolling inside your dialog you can set overflow: auto there, with a height set on that element.

Older browsers (most notably IE) might show a horizontal scrollbar as well, you might have to set overflow-x: hidden if that is the case.

Also see: CSS div element - how to show horizontal scroll bars only? for more information on scrollbars.

这篇关于如何锁定网页的临时滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！