web-dev-qa-db-ja.com

文書本文のスクロールを無効にする方法は？

多くのコンテンツを含むHTMLがあり、HTMLが読み込まれるとすぐに垂直スクロールバーが表示されます。これで、このHTMLからフルスクリーンIFRAMEがロードされます。問題は、IFRAMEがロードされたときに、親スクロールバーが引き続き保持されることです。Iframeがロードされたときにスクロールバーを無効にしたいのです。

私は試した：

  • document.body.scroll = "no"、FFおよびchromeでは機能しませんでした。
  • document.style.overflow = "hidden";この後、私はまだスクロールすることができ、iframe全体が上にスクロールして親HTMLを表示しました。

私の要件は、IFRAMEが読み込まれたときに、親HTMLにスクロールバーがある場合、IFRAME全体をスクロールできないことです。

何か案は？

javascripthtmlajaxxhtml
22
Manohar

親ではなくiframeのスクロールバーを使用する場合は、これを使用します。

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

Iframeではなく親のスクロールバーを使用する場合は、次を使用する必要があります。

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

または、scrolling="no" iframeのタグの属性：<iframe src="some_url" scrolling="no">。

30
ntownsend

cSSで

body,html{
  overflow:hidden
}
9
Behnam Mohammadi

次のJavaScriptが機能します。

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

スクロールを無効にするには：

page.classList.add('noscroll');

スクロールを有効にするには：

page.classList.remove('noscroll');

CSSファイルに以下を追加します。

.noscroll {
    position: fixed!important
}
5
Ratnakar

このCSSを追加

body.disable-scroll {
    overflow: hidden;
}

このコードの実行を無効にするタイミング

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

このコードを有効にするタイミング

$("body").removeClass("disable-scroll")
2
Behnam Mohammadi

私はこれが古代の質問であることを知っていますが、私は自分が計量するだろうと思っただけです。

disableScroll を使用しています。シンプルで、夢のように機能します。

本文のスクロールを無効にするのに苦労しましたが、子要素（モーダルやサイドバーなど）でスクロールを許可しています。 disableScroll.on([element], [options]);を使用して何かを実行できるように見えますが、まだ動作するようにはなりません。

ボディのoverflow: hidden;と比較してこれが好まれる理由は、次のようにoverflow: hidden;が追加される可能性があるため、オーバーフロー隠しが厄介になる可能性があるためです。

...これはプリローダーなどに適しています。CSSの読み込みが完了する前にレンダリングされるためです。

ただし、開いているナビゲーションでbody- tag（<body class="body__nav-open">など）にクラスを追加する必要がある場合、問題が発生します。そして、それはoverflow: hidden; !importantとあらゆる種類のがらくたを持つ1つの大きな綱引きに変わります。

0
Zeth