web-dev-qa-db-ja.com

本文のスクロールを無効にする

HTML bodyのスクロールを完全に無効にしたいのですが。私は以下のオプションを試しました：

  • overflow: hidden;（動作していない、スクロールを無効にしていない、スクロールバーを隠した）

  • position: fixed;（これはうまくいきましたが、一番上までスクロールしてしまいました。この特定のアプリケーションには受け入れられません）

私はこれら二つの選択肢に代わるものを見つけることができませんでした、それ以上ありますか？

htmlcssscroll
85
user4532193

heightとoverflowを設定します。

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

169
panther

Bodyタグがあなたが書くことができる何もしないならHTML cssはうまく働きます

<body scroll="no" style="overflow: hidden">

この場合、上書きはbodyタグで行われるべきです、それは制御することはより簡単ですが時々頭痛を与える。

13
Lalo

この投稿は役に立ちましたが、他の人を助けるかもしれないわずかな選択肢を共有したいと思いました：

heightの代わりにmax-heightを設定してもうまくいきます。私の場合は、クラスの切り替えに基づいてスクロールを無効にしています。コンテナーの高さがビューポートの高さより小さいときに.someContainer {height: 100%; overflow: hidden;}を設定するとコンテナーが引き伸ばされてしまいます。 max-heightを設定すると、これが考慮されますが、コンテナーの高さが、コンテンツが変更されたときのビューポートの高さよりも大きい場合でも、スクロールは無効になります。

11
joebjoe