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


137

HTMLのスクロールをbody完全に無効にしたいと思います。私は次のオプションを試しました:

  • overflow: hidden; (動作しません、スクロールを無効にしませんでした、それはスクロールバーを隠しただけです)

  • position: fixed; (これは機能しましたが、完全に一番上までスクロールしましたが、これはこの特定のアプリケーションでは受け入れられません)

これら2つのオプションの代替案を見つけることができませんでしたが、それ以上ありますか?


3
どの要素にoverflow:hiddenを適用しましたか?
Sajad Karuthedath、2015

ここで何を達成しようとしているのですか?あなたの最終目標は何ですか?
jbutler483 2015

2
関連するコードを表示すると、支援が容易になります。
Sleek Geek

1
オーバーフロー:非表示。行く方法です。それが機能しない場合は、CSSに他の問題があります。html、body {overflow:hidden;}を試して、これがうまくいかない場合は、* {overflow:hidden;}を試して、何が悪いのかを理解してみてください
Jonas Grumann、2015

回答:


245

セットheightoverflow

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

http://jsfiddle.net/q99hvawt/


3
「body」の前に「html」を忘れた

2
位置が固定されているオーバーレイ要素がある場合、iOSでは機能しません。
notQ

1
"overflow": "hidden"を追加するだけで問題なく動作します。
JPG

この解決策はすぐには機能しませんでしたが、検査後に「マージン」がどこかで上書きされていました。その要素の「マージン:0;」を設定する トリックをしました。
joaoprib

19

bodyタグがあなたが書くことができる何もしない場合、HTML cssは正常に動作します

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

この場合、オーバーライドはbodyタグで行う必要があります。制御は簡単ですが、頭痛の種になることがあります。


21
これは有効なHTML5ではありません
mbomb007 2018年

@ mbomb007 HTML5に関連するここの間違いについてコメントしていただけますか?
Ethan

5
@イーサン scroll属性は<body>タグでは無効です。それは私が見つけることができるどの仕様でも有効としてリストされていません。w3schools ; MDN ; Quackit
mbomb007

14

この投稿は役に立ちましたが、他の人に役立つかもしれないわずかな代替案を共有したかっただけです:

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


これにより、スクロールトップトップの不要な副作用なしに、デスクトップブラウザーの私の日を節約できました。しかし、モバイルブラウザー(iphone5sおよびandroid)では機能しませんでした。
ボブ

5

これを実現するために、上の2つのCSSプロパティを追加<body>要素。

body {
   height: 100%;
   overflow-y: hidden;
}

最近では、ユーザーがアカウントを作成する必要がある多くのニュースWebサイトがあります。通常、ページへのフルアクセスを約1秒間許可し、その後ポップアップを表示して、ユーザーが下にスクロールできないようにします。

電信


これにより、スクロールバーが非表示になります。ただし、質問は、スクロールバーを非表示にする代わりの方法を具体的に要求することです
DataGeek

@DataGeek、これはスクロールバーを非表示にするだけでなく、下にスクロールする機能も停止します。そして私が理解しているようにそれが求められていたものです。つまり、単にそれを非表示にするだけでなく、下にスクロールすることも不可能にします。
bvdb
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.