如何禁用滚动文档正文？

Posted 2023-03-05

技术标签:

【中文标题】如何禁用滚动文档正文？【英文标题】：How to disable scrolling the document body? 【发布时间】：2011-01-28 23:56:46 【问题描述】：

我有一个包含大量内容的 html，一旦加载 HTML，就会出现一个垂直滚动条。现在从这个 HTML 加载一个全屏 IFRAME。问题是加载 IFRAME 时，父滚动条仍然存在，我想在加载 IFRAME 时禁用滚动条。

我试过了：

document.body.scroll = "no"，它不适用于 FF 和 chrome。 document.style.overflow = "hidden"; 在此之后我仍然可以滚动，整个 iframe 会向上滚动显示父 HTML。

我的要求是，当加载 IFRAME 时，如果父 HTML 有滚动条，我们永远不能滚动整个 IFRAME。

有什么想法吗？

【问题讨论】：

【参考方案1】：

如果您想使用 iframe 的滚动条而不是父级的滚动条，请使用：

document.body.style.overflow = 'hidden';

如果你想使用父级的滚动条而不是 iframe 的，那么你需要使用：

document.getElementById('your_iframes_id').scrolling = 'no';

或在 iframe 的标签中设置scrolling="no" 属性：<iframe src="some_url" scrolling="no">。

【讨论】：

除非请在样式表中而不是在 javascript 中执行此操作 :-) 感谢您的意见。我做错了，它按说明工作。【参考方案2】：

用css

body, html 
  overflow: hidden

【讨论】：

【参考方案3】：

以下 JavaScript 可以工作：

var page = $doc.getElementsByTagName('body')[0];

禁用滚动使用：

page.classList.add('noscroll');

启用滚动使用：

page.classList.remove('noscroll');

在 CSS 文件中，添加：

.noscroll 
    position: fixed!important

【讨论】：

位置：固定；是我的解决方案请注意，当使用 position: fixed 时，body 的滚动位置会移动到顶部，这可能会令人不安不错的解决方案，确保将body width设置为100%，否则body会被折叠。【参考方案4】：

添加这个css

body.disable-scroll 
    overflow: hidden;

以及何时禁用运行此代码

$("body").addClass("disable-scroll");

以及何时启用运行此代码

$("body").removeClass("disable-scroll")

【讨论】：

【参考方案5】：

我知道这是一个古老的问题，但我只是想我会参与进来。

我正在使用disableScroll。简单，它就像在梦中一样工作。

我在禁用 body 滚动时遇到了一些问题，但在子元素（如模式或侧边栏）上允许滚动。看起来可以使用disableScroll.on([element], [options]); 完成某些操作，但我还没有让它工作。

与 body 上的 overflow: hidden; 相比，它更受欢迎的原因是溢出隐藏可能会变得讨厌，因为有些东西可能会像这样添加 overflow: hidden;：

... 这对预加载器等很有用，因为它是在 CSS 完成加载之前呈现的。

但是当一个打开的导航应该将一个类添加到body-tag（如<body class="body__nav-open">）时，它会出现问题。然后它变成了与overflow: hidden; !important 和各种废话的一场大拔河。

【讨论】：

【参考方案6】：

回答： document.body.scroll = '否';

【讨论】：

这仅适用于 IE，因此不建议用于项目。

以上是关于如何禁用滚动文档正文？的主要内容，如果未能解决你的问题，请参考以下文章