如何禁用滚动文档正文？答案

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

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

我试过了：

我的要求是，当加载 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">。

【讨论】：

【解决方案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
}

【讨论】：

【解决方案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 = '否';

【讨论】：