CSSでスクロールバーを非表示にする方法-CSSチュートリアル-php.cn

CSSでスクロールバーを非表示にする方法

不言

リリース： 2018-06-09 15:33:35

オリジナル

1508 人が閲覧しました

この記事では主に 3 つの方法を使用して CSS でスクロールバーを非表示にする方法を紹介します。もちろん、実際の状況に基づいて 2 番目の方法をお勧めします。この記事に興味のある友達は一緒に学んでください

xhtml でスクロールバーを非表示にする
IE6 でフレーム付きの xhtml ページを閲覧すると、デフォルトで水平スクロールバーと垂直スクロールバーが一緒に表示されます。これは IE6 のバグで、Firefox では発生します。これは正常であり、その理由は、XHTML 1.0 の暫定的な doctype の解釈における欠陥です。このバグには一般に 3 つの解決策があります。
方法 1:
コード:
プログラムコード

html { overflow-y: scroll; }

ログイン後にコピー

原則: の垂直表示を強制する。水平スクロールバーを無視する IE スクロールバー
利点: この問題を完全に解決し、完全な XHTML doctype を保持できるようにします。
欠点: ページに垂直スクロールバーが必要ない場合でも、垂直スクロールバーが表示されます。
方法 2: (推奨)
コード:
プログラムコード

html { overflow-x: hidden; overflow-y: auto; }

ログイン後にコピー

原則: 水平スクロールを非表示にし、垂直スクロールはコンテンツに応じて適応します
利点: この問題は視覚的に解決され、不要な場合は強制されません。スクロールバーが表示されます。
欠点: 水平スクロールバーが非表示になるだけです。ページに水平スクロールバーが必要な場合、ユーザーは水平スクロールできないため、画面の外側のコンテンツは表示されません。

方法 3:
コード: プログラムコード

body { margin-right: -15px; margin-bottom: -15px; }

ログイン後にコピー

原理: これにより、IE がこの正確な値を追加すると、スクロールバーが必要であるという錯覚がなくなります。

長所: この問題は視覚的に解決されます。垂直スクロールはコンテンツに応じて適応されます。
短所: 15px の余白が「人工的に作成」されるため、塗りつぶされた画面領域は使用できません。 -------------------------
スタイルを設定します
元のHTMLでは、このようにページ全体を定義できますスクロールバー
プログラムコード

body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

ログイン後にコピー

しかし、同じコードを xhtml に適用すると機能しません。多くの友人が同じ問題に遭遇していると思います。では、xhtml でスクロールバースタイルを適用するにはどうすればよいでしょうか?次のコードを見てください

プログラムコード

html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

ログイン後にコピー

このコードと前の段落の唯一の違いは、css で定義された要素の 1 つは body で、もう 1 つは html であることです。もう一度テストして、HTML ページの
「body」を「html」に変更してテストし、それでも効果が得られることを確認してみましょう。なぜ？

文字通り、xhtml には html よりも x が 1 つ多いのですが、この x は実際には xml であるのに、なぜ xml を追加する必要があるのでしょうか。実際、最も根本的な理由は、HTML をより構造化して標準化することです (HTML は本当に悪いものなので)。

htmlで定義するのはbodyです。htmlはあまり標準的ではないので、これは機能しますが、xhtmlでは機能しません。
図を見ると、bodyタグ自体がルート要素ではなく、htmlだけがルート要素であることがわかります。ルート要素であり、ページのスクロールバーもルート要素に属します。このため、body の定義は効果がありません。これは、定義した内容が子要素にすぎないためです。原理はわかったので、実験してみましょう。「body」または「xhtml」の定義を「*」に置き換えると、* が定義であるため、
プログラムコード

*{ 
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

ログイン後にコピー

は html と xhtml の両方に渡されます。もちろん、「html」タグも含まれます。

(追記: 実際、html と xhtml の違いは、XHTML 1.0 の暫定的な doctype の有無の違いではありません。しかし、XHTML 1.0 の暫定的な doctype をページから削除すると、そのページはデフォルトの表示モードは html4.01 ですが、このページの標準は html であっても、同じページで本文を定義しても影響を受けないように、XHTML 1.0 の暫定的な doctype を変更する必要があります。 4.01)

上記はこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。