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

方法: 1. 「overflow-y:scroll」ステートメントを使用します。 2. 「overflow-x:hidden;overflow-y:auto;」ステートメントを使用します。 3. 「margin-right:-」を使用します。 15px; margin-bottom:-15px;」ステートメント。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

方法 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 がこの正確な値を追加すると、スクロール バーが必要であるという錯覚がなくなります。

利点: この問題は視覚的に解決されます。垂直スクロールはコンテンツに応じて適応します。

欠点: 15 ピクセルのマージンは「人工的に作成」されており、塗りつぶされた画面領域は使用できません

---------------------- -- --------------

スタイルを設定します

元の 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 つが body であることです。 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)

(学習ビデオ共有:

css ビデオ チュートリアル)

以上がCSSでスクロールバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。