Javascript 如何禁用滚动文档正文？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2469529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable scrolling the document body?
提问by Manohar
I have a HTML which has lot of content and a vertical scrollbar appears as soon as the HTML is loaded. Now from this HTML a full screen IFRAME is loaded. The problem is when the IFRAME is loaded, the parent scrollbar still persists, I want to disable the scrollbar when the Iframe is loaded.
我有一个包含大量内容的 HTML，一旦加载 HTML，就会出现一个垂直滚动条。现在从这个 HTML 加载全屏 IFRAME。问题是加载 IFRAME 时，父滚动条仍然存在，我想在加载 Iframe 时禁用滚动条。
I tried:
我试过：
document.body.scroll = "no", it did not work with FF and chrome.document.style.overflow = "hidden";after this I was still able to scroll, and the whole iframe would scroll up revealing the parent HTML.
document.body.scroll = "no"，它不适用于 FF 和 chrome。document.style.overflow = "hidden";在此之后，我仍然能够滚动，并且整个 iframe 将向上滚动以显示父 HTML。
My requirement is, when the IFRAME is loaded, we should never be able to scroll the entire IFRAME if the parent HTML has a scrollbar.
我的要求是，当 IFRAME 加载时，如果父 HTML 有滚动条，我们应该永远无法滚动整个 IFRAME。
Any ideas?
有任何想法吗？
回答by ntownsend
If you want to use the iframe's scrollbar and not the parent's use this:
如果您想使用 iframe 的滚动条而不是父级的滚动条，请使用：
document.body.style.overflow = 'hidden';
If you want to use the parent's scrollbar and not the iframe's then you need to use:
如果要使用父滚动条而不是 iframe 的滚动条，则需要使用：
document.getElementById('your_iframes_id').scrolling = 'no';
or set the scrolling="no"attribute in your iframe's tag: <iframe src="some_url" scrolling="no">.
或scrolling="no"在 iframe 的标签中设置属性：<iframe src="some_url" scrolling="no">。
回答by Behnam Mohammadi
with css
用CSS
body,html{
overflow:hidden
}
回答by Ratnakar
The following JavaScript could work:
以下 JavaScript 可以工作：
var page = $doc.getElementsByTagName('body')[0];
To disable Scroll use:
要禁用滚动使用：
page.classList.add('noscroll');
To enable Scroll use:
要启用滚动使用：
page.classList.remove('noscroll');
In the CSS file, add:
在 CSS 文件中，添加：
.noscroll {
position: fixed!important
}
回答by Behnam Mohammadi
add this css
添加这个css
body.disable-scroll {
overflow: hidden;
}
and when to disable run this code
以及何时禁用运行此代码
$("body").addClass("disable-scroll");
and when to enabled run this code
以及何时启用运行此代码
$("body").removeClass("disable-scroll")
回答by Zeth
I know this is an ancient question, but I just thought that I'd weigh in.
我知道这是一个古老的问题，但我只是想我会权衡一下。
I'm using disableScroll. Simple and it works like in a dream.
我正在使用disableScroll。简单，就像在做梦一样。
I have had some trouble disabling scroll on body, but allowing it on child elements (like a modal or a sidebar). It looks like that something can be done using disableScroll.on([element], [options]);, but I haven't gotten that to work just yet.
我在禁用 body 上的滚动时遇到了一些麻烦，但在子元素（如模式或侧边栏）上允许它。看起来可以使用 完成某些事情disableScroll.on([element], [options]);，但我还没有让它起作用。
The reason that this is prefered compared to overflow: hidden;on body is that the overflow-hidden can get nasty, since some things might add overflow: hidden;like this:
与overflow: hidden;body相比，这更受欢迎的原因是溢出隐藏可能会变得令人讨厌，因为有些东西可能会添加overflow: hidden;如下：
... This is good for preloaders and such, since that is rendered before the CSS is finished loading.
... 这对预加载器等很有用，因为它是在 CSS 完成加载之前呈现的。
But it gives problems, when an open navigation should add a class to the body-tag (like <body class="body__nav-open">). And then it turns into one big tug-of-war with overflow: hidden; !importantand all kinds of crap.
但是它会出现问题，当打开的导航应该向body-tag添加一个类（如<body class="body__nav-open">）。然后它变成了一场与overflow: hidden; !important各种废话的大型拔河比赛。
回答by Jainish
Answer : document.body.scroll = 'no';
答案：document.body.scroll = 'no';
