CSS_html/css_WEB-ITnoseでスクロールバーを非表示にする簡単な実装方法

xhtml のスクロール バーを非表示にする

ie6 を使用してフレーム化された xhtml ページを閲覧すると、デフォルトで水平スクロール バーと垂直スクロール バーが一緒に表示されます。これは

Firefox では正常なバグです。それは、XHTML 1.0 の暫定的な doctype の解釈に欠陥があるということです。

このバグには一般に 3 つの解決策があります。

原則: 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 をページから削除すると、ページには何も表示されなくなります。 doctype であり、デフォルトの表示は次のようになります。メソッドは html4.01 ですが、XHTML 1.0 の暫定的な doctype を HTML 4.01 の doctype に変更する必要があります。このページの標準は html ですが、同じページで本文を定義しても効果はありません。 4.01)