如何禁用滾動文檔正文？
[英]How to disable scrolling the document body?
問題描述
我有一個包含大量內容的 HTML，一旦加載 HTML，就會出現一個垂直滾動條。 現在從這個 HTML 加載全屏 IFRAME。 問題是加載 IFRAME 時，父滾動條仍然存在，我想在加載 Iframe 時禁用滾動條。
我試過：
-
document.body.scroll = "no"，它不適用於 FF 和 chrome。 -
document.style.overflow = "hidden";在此之后，我仍然能夠滾動，並且整個 iframe 將向上滾動以顯示父 HTML。
我的要求是，當 IFRAME 加載時，如果父 HTML 有滾動條，我們應該永遠無法滾動整個 IFRAME。
有任何想法嗎？
6 個解決方案
解決方案1
42 已采納 2010-03-18 12:18:21
如果您想使用 iframe 的滾動條而不是父級的滾動條，請使用：
document.body.style.overflow = 'hidden';
如果要使用父滾動條而不是 iframe 的滾動條，則需要使用：
document.getElementById('your_iframes_id').scrolling = 'no';
或者在 iframe 的標簽中設置scrolling="no"屬性： <iframe src="some_url" scrolling="no"> 。
解決方案2
11 2014-02-17 11:03:44
用CSS
body, html {
overflow: hidden
}
解決方案3
7 2013-08-02 09:48:18
以下 JavaScript 可以工作：
var page = $doc.getElementsByTagName('body')[0];
要禁用滾動使用：
page.classList.add('noscroll');
要啟用滾動使用：
page.classList.remove('noscroll');
在 CSS 文件中，添加：
.noscroll {
position: fixed!important
}
解決方案4
2 2016-10-30 10:56:07
添加這個css
body.disable-scroll {
overflow: hidden;
}
以及何時禁用運行此代碼
$("body").addClass("disable-scroll");
以及何時啟用運行此代碼
$("body").removeClass("disable-scroll")
解決方案5
1 2019-02-24 11:08:40
我知道這是一個古老的問題，但我只是想我會權衡一下。
我正在使用disableScroll 。 簡單，就像在做夢一樣。
我在禁用 body 上的滾動時遇到了一些麻煩，但在子元素（如模式或側邊欄）上允許它。 看起來可以使用disableScroll.on([element], [options]);來完成某些事情disableScroll.on([element], [options]); ，但我還沒有讓它起作用。
與overflow: hidden;相比，這是首選的原因overflow: hidden; 在身體上，溢出隱藏會變得令人討厭，因為有些東西可能會添加overflow: hidden; 像這樣：
... 這對預加載器等很有用，因為它是在 CSS 完成加載之前呈現的。
但是它會出現問題，當打開導航應該向body -tag 添加一個類時（例如<body class="body__nav-open"> ）。 然后它變成了一場帶有overflow: hidden; !important大型拔河overflow: hidden; !important overflow: hidden; !important和各種廢話。
解決方案6
-3 2014-01-25 12:16:06
答案：document.body.scroll = 'no';
如何在固定div上滾動而不隱藏body滾動條時禁用body滾動？
[英]How to disable scroll of body while scrolling on a fixed div without hiding scroll bar of body?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.