HTML のスクロールバーについて/スクロールバーの削除

1. xhtmlの下のスクロールバーの色

元の HTML では、ページ全体のスクロールバーを次のように定義できます。

コードをコピー

コードは次のとおりです。

体{
scrollbar-3dlight-color:#D4D0C8; /*- 一番左の外側-*/
scrollbar-highlight-color:#fff; /*- 左から2番目 -*/
スクロールバーのフェイスカラー:#E4E4E4; /*- フェイス-*/
scrollbar-arrow-color:#666; /*- 矢印-*/
scrollbar-shadow-color:#808080; /*- 右から2番目-*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右側 -*/
scrollbar-base-color:#D7DCE0; /*- 基本色 -*/
scrollbar-track-color:#;/*- スライドトラック-*/
}

しかし、同じコードを xhtml に適用すると機能しません。多くの友人が同じ問題に遭遇したと思います。

では、XHTML でスクロールバースタイルを適用するにはどうすればよいでしょうか?次のコードを見てください。

コードをコピー

コードは次のとおりです。

html{
scrollbar-3dlight-color:#D4D0C8; /*- 一番左の外側-*/
scrollbar-highlight-color:#fff; /*- 左から2番目 -*/
スクロールバーのフェイスカラー:#E4E4E4; /*- フェイス-*/
scrollbar-arrow-color:#666; /*- 矢印-*/
scrollbar-shadow-color:#808080; /*- 右から2番目-*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右側 -*/
scrollbar-base-color:#D7DCE0; /*- 基本色 -*/
scrollbar-track-color:#;/*- スライドトラック-*/
}

このコードと前のコードの唯一の違いは、CSS で定義された要素です。1 つは body で、もう 1 つは html です。 html ページの「body」を「html」に変更して再度テストし、効果が達成できるかどうかを確認しましょう。それはなぜでしょうか?

次の図を見てみましょう。

これは HTML の最も基本的な DOM ツリー構造です。

html と xhtml の定義を見てみましょう。

HTML (Hyper Text Markup Language) はインターネットで広く使用されています。HTML は、テキストベースの表示方法とハイパーリンクが他のページに接続する方法を記述します。

XHTML (Extensible Hypertext Markup Language) は、表現は HTML に似ていますが、より厳密な構文を持つマークアップ言語です。継承の点では、HTML は SGML に基づくアプリケーションであり、非常に柔軟性がありますが、XHTML は SGML のサブセットである XML に基づいています。 XHTML 1.0 は 2000 年 1 月 26 日に W3C 勧告となりました。

文字通り言えば、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; /*- 左から2番目 -*/
スクロールバーのフェイスカラー:#E4E4E4; /*- フェイス-*/
scrollbar-arrow-color:#666; /*- 矢印-*/
scrollbar-shadow-color:#808080; /*- 右から2番目-*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右側 -*/
scrollbar-base-color:#D7DCE0; /*- 基本色 -*/
scrollbar-track-color:#;/*- スライドトラック-*/
}

* は「html」タグを含むページ上の任意のタグを定義するため、html と xhtml の両方が渡されます。

(追記: 実際、html と xhtml の違いは、XHTML 1.0 移行ドキュメントタイプの有無の違いであると言った方が適切です。ただし、ページから XHTML 1.0 移行ドキュメントタイプを削除すると、そのページにはドキュメントタイプがなくなり、デフォルトの表示モードは html4.01 になります。ただし、XHTML 1.0 移行ドキュメントタイプを HTML 4.01 ドキュメントタイプに変更すると、そのページの標準が html 4.01 であっても、ページの本文を定義しても効果はありません)

2. XHTML のフレームページ上の水平スクロールバーの問題

IE6 でフレーム付きの XHTML ページを閲覧する場合、デフォルトで水平および垂直のスクロールバーが表示されます。これは IE6 のバグです。Firefox では正常です。この原因は、XHTML 1.0 移行ドキュメントタイプの解釈に欠陥があるためです。

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

方法1:

コード：

html { オーバーフロー-y: スクロール; }

原理: IE の垂直スクロールバーを強制的に表示し、水平スクロールバーは無視します。
利点: この問題を完全に解決し、完全な XHTML doctype を維持できます。
欠点: ページに垂直スクロールバーが必要ない場合でも、垂直スクロールバーが表示されます。

方法2:

コード：

html { オーバーフローx: 非表示; オーバーフローy: 自動; }

原則: 水平スクロールを非表示にして、垂直スクロールをコンテンツに合わせて調整します。
利点: 視覚的に問題を解決します。垂直スクロールバーは、必要のない場合には強制的に表示されません。
デメリット: 水平スクロールバーのみが非表示になります。ページに水平スクロールバーが本当に必要な場合、ユーザーは水平方向にスクロールできないため、画面外のコンテンツは表示されません。

方法3:

コード：

本文 { 右余白: -15px; 下余白: -15px; }

仕組み: これにより、水平および垂直の余白に負の値が追加されます。IE は、スクロールバーが必要であるという錯覚を排除するために、この正確な値を追加します。
利点: この問題は視覚的に解決され、垂直スクロールはコンテンツに基づいて適応されます。
デメリット: 15px の余白は「人工的に作成された」ものであるため、塗りつぶされた画面領域は使用できません。

<本文スクロール=いいえ>

水平スクロールバーを削除します。
<body style="overflow-x: hidden">
垂直スクロールバーを削除します。
<body style="overflow-y: hidden">

水平スクロールバーを非表示にして、垂直スクロールバーを表示します。
<body style="overflow-x:hidden;overflow-y:scroll">

すべて非表示
<body style="overflow:hidden">

または
<本文スクロール="いいえ">

スクロールバーの属性コードは次のとおりです。
overflow-y : 表示 | 自動 | 非表示 | スクロール
visible : コンテンツをクリップせず、スクロールバーも追加しません。
自動: コンテンツをクリップし、必要に応じてスクロールバーを追加します
Hidden: オブジェクトの高さを超えるコンテンツを表示しません。このプロパティはここでは紹介しません。よろしければ、自分で試してみてください。
scroll : 垂直スクロールバーを常に表示

まず、スクロールバーを削除する方法を説明します。
Baidu スタイルのテンプレートを使用する場合、スクロールバーは 1 つしか存在できません。これは、全体のスペースの右側にある最大のブラウザーウィンドウスクロールバーであり、私が美化したスクロールバーです。このスクロールバーを削除できますが、ブラウジング方法には影響しません。
体内で
{} に overflow-y を追加します。
表示されていない場合は、スクロールバーは表示されません。どうやってこのように引き下げるのですか？と疑問に思うかもしれません。ハハ、ブラウジングには影響しないと言ったので、もちろん方法はあります。ブラウジングの方法は、マウスホイールを使用することです。スクロールバーはなくなりましたが、マウスホイールでWebページを上下にスクロールすることはできます。ウェブを閲覧するときに、マウスでスクロールバーを直接ドラッグするよりも、スクロールホイールを使用してウェブページを下にスクロールすることが多いと思います。念のため言っておきますが、スクロールバーがなく、スクロールホイールのないマウスを使っている友人に出会ったら、どうやって Web を閲覧しますか?ハハ、キーボードの矢印キーの上にあるPageUpキーとPageDownキーを使うことができます
ページを上下にめくるには、スペースキーでウェブページを下に引っ張ったり、Shift+スペースキーでウェブページを上に引っ張ったりすることもできます。別の方法は、上下矢印キーを使用して引っ張ることです。さらに、Home キーを押してウェブページの先頭に戻り、End キーを押してウェブページの下部に移動することもできます。ハハ、方法はたくさんあるのではないですか?ただし、これではどうしても少し不便になってしまうので、自分のスペースや好みに応じてスクロールバーを解除するかどうかを検討してください。

ハハハ、一度にこんなにたくさん話すとは思わなかったよ。

スクロールバーを追加する方法は次のとおりです。
overflow-y: auto; 高さ: ピクセル数
自動車
スクロールバーを追加するかどうかを自動的に決定します。設定されたオブジェクトの内容がheightで設定された高さを超えると、自動的にスクロールバーが追加され、それ以外の場合は表示されません。body{}のデフォルト値は
overflow-y: auto; height: ブラウザの高さ。ウェブページのコンテンツがブラウザの高さを超えると、ブラウザの右側にスクロールバーが自動的に表示されます。これを設定する必要がある場合は、最新のコメント#m_comment{}、記事リスト#m_blog{}、およびコンテンツと高さが異なる他のテンプレートに設定することをお勧めします。一部の友人はこれらのテンプレートのIDを見つけることができません。おそらく、#m_comment div.item{}または#m_pro a{}などのIDしかありません。存在しないIDを追加して設定できます。

スクロールバーを追加する別の方法を次に示します。
オーバーフロー-y:スクロール
このパラメータの機能は上で説明しました。ただし、このパラメータのみを追加すると、スクロールバーは表示されますが、スクロールバーは表示されないため、
高さ: 何ピクセル
heightプロパティは上記の方法と似ていますが、根本的な違いがあります。オブジェクトコンテンツの高さがheightで設定された高さを超えていても、常に横にスクロールバーが表示されます。

次に、スクロールバーの美化についてお話しします。友人がインターネットで説明を見せてくれました。上の写真は非常に良いと思いますが、非常に小さいので、2 倍に拡大すると、はるかに鮮明に見えます。まず、美化のさまざまなプロパティについて説明します。

コードをコピー

コードは次のとおりです。

SCROLLBAR-FACE-COLOR: カラーコード;
SCROLLBAR-HIGHLIGHT-COLOR: カラーコード;
SCROLLBAR-SHADOW-COLOR: カラーコード;
SCROLLBAR-3DLIGHT-COLOR: カラーコード;
SCROLLBAR-ARROW-COLOR: カラーコード;
SCROLLBAR-TRACK-COLOR: カラーコード;
SCROLLBAR-DARKSHADOW-COLOR: カラーコード;

こんなに多くの属性を見ると少し圧倒されてしまいますか?ハハ、心配しないでください。先ほど述べた 2 倍に拡大した図を見れば、気分がずっと良くなるでしょう。

ここの画像には scrollbar-base-color 属性もあります。実はこの属性は上記の 7 つの属性の合計です。なんと言えばいいでしょうか?この属性の色を設定すると、
最初の 7 つのプロパティは設定する必要はなく、スクロールバーが自動的に設定しますが、この設定は、設定した scrollbar-base-color の色に基づいて自動的に設定されます。このプロパティの利点は、各場所の色を調べるのに多くの時間を費やす必要がないことですが、欠点はすべての色を 1 つにブレンドできないことです。。

注意: scrollbar-base-color を設定する場合は、他の 7 つのプロパティを設定しないでください。他の 7 つのプロパティを設定する場合は、scrollbar-base-color を設定しないでください。そうしないと、競合が発生し、一部の効果が機能しない可能性があります。

最後に、皆さんが私の美化されたコードを気に入ってくれるかもしれないと考え（うぬぼれが強いですね～）、美化されたコードを投稿しました。

コードをコピー

コードは次のとおりです。

スクロールバーの表面の色: #CCFFFF;
スクロールバーのハイライト色: 白;
スクロールバーのシャドウの色: #813533;
スクロールバー-3DLIGHT-COLOR: #813533;
スクロールバー矢印の色: #813533;
スクロールバートラックの色: 白;
スクロールバー-ダークシャドウ-色: #813533;

上記のコードはbody{}に追加されます。

<<: 初心者向け入門チュートリアル⑨：ポータルサイトの構築方法

>>: VUE 応答性原理の詳細な説明