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

1. xhtml のスクロール バーの色の問題

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

スクロールバー-ハイライトカラー:#fff; /*- 左から 2 番目-*/

スクロールバー-フェイスカラー:#E4E4E4; /*- フェイス-*/

スクロールバー-矢印カラー:#666 ; /*- 矢印-*/

スクロールバー-シャドウカラー:#808080; /*- 右から 2 番目-*/

スクロールバー-darkshadow-color:#D7DCE0; /*- 右から 1 番目-*/

スクロールバー-ベースカラー:#D7DCE0; /*- ベースカラー-*/

スクロールバー-トラックカラー:#;/*- スライド-*/

}

ただし、同じコードは使用できませんxhtml で使用すると、うまくいきました。多くの友人が同じ問題に遭遇したと思います。

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

html{

スクロールバー-3dlight-color:#D4D0C8; /*- 一番左-*/

スクロールバー-ハイライト-カラー:#fff; /*- 左から 2 番目-*/

スクロールバー -face-color:#E4E4E4; /*-face-*/

スクロールバー-arrow-color:#666; /*-arrow-*/

スクロールバー-shadow-color:#808080;右から- */

スクロールバー-ダークシャドウ-カラー:#D7DCE0; /*- 右から-*/

スクロールバー-ベースカラー:#D7DCE0; /*- ベースカラー-*/

スクロールバー-トラックカラー:#;/ *- Slider-*/

}

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

下の図を見てみましょう:




これは、HTML の最も基本的な dom ツリー構造です。
HTML と xhtml の定義を見てみましょう:



HTML (ハイパー テキスト マークアップ言語、ハイパー テキスト マークアップ言語)、ハイパー テキスト マークアップ言語は、インターネット上で広く使用されており、テキスト ベンチマークのレンダリング方法を記述します。ハイパーリンクが別のページに接続する方法。

XHTML (Extensible Hypertext Markup Language、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 は本当に悪いものなので)。

OK、上の構造ツリーを見てみましょう。html で定義しているのは body です。html はあまり標準的ではないので、これは有効ですが、xhtml では機能しません。 body タグ自体はルート要素ではなく、html だけがルート要素であり、ページのスクロール バーもルート要素に属していることは明らかです。このため、body の定義は効果がありません。私たちが定義する は単なるサブ要素です。原理はわかったので、「body」または「xhtml」の定義を「*」に変更してみましょう。 -* /

スクロールバーハイライトカラー:#fff; /*- 左から 2 番目-*/

スクロールバー-フェイスカラー:#E4E4E4; /*- フェイス-*/

スクロールバー-矢印カラー:# 666; / *- 矢印-*/

スクロールバー-シャドウカラー:#808080; /*- 右から 2 番目-*/

スクロールバー-darkshadow-color:#D7DCE0; /*- 右から 1 番目-* /

スクロールバー-ベース-カラー:#D7DCE0; /*- ベースカラー-*/

スクロールバー-トラック-カラー:#;/*- スライド-*/

}

は 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)

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

IE6 を使用してフレーム付きの xhtml ページを参照すると、デフォルトで水平スクロール バーと垂直スクロール バーが一緒に表示されます。 Firefox では正常です。その理由は、doctype の XHTML 1.0 解釈の欠陥によるものです。

このバグには通常 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の余白は「人工的に作成」されるため、塗りつぶされた画面領域は使用できません。



水平スクロールバーを削除します:



垂直スクロールバーを削除します:



水平スクロール バーを非表示にし、垂直スクロール バーを表示します:



すべて非表示

< ;body style ="overflow:hidden">

or



スクロールバーの属性コードは次のとおりです。スクロール

visible: コンテンツを切り取ったり、スクロール バーを追加したりしません。

auto: 必要に応じてコンテンツを切り取り、スクロール バーを追加します

hidden: オブジェクトの高さを超えるコンテンツを表示しません。このプロパティはここでは紹介しませんので、必要に応じて試してみてください。

scroll: 常に。垂直スクロール バーを表示します

まず最初に、スクロール バーを削除する方法を説明します:

Baidu スタイル テンプレートを使用する場合、スクロール バーは 1 つだけ存在でき、それはブラウザ ウィンドウの最大のスクロール バーです。スペース全体の右側、これは私が美化したスクロール バーです。このスクロール バーは削除できますが、ブラウジング方法には影響しません。

本文に overflow-y を追加します。
{}:

visible。スクロール バーは表示されません。このように引き下げるにはどうすればよいのかと疑問に思われるかもしれません。あはは、ブラウジングには影響しないと言いましたが、もちろん、マウス ホイールを使用してブラウズする方法はあります。ただし、マウス ホイールを使用して Web ページを上下にスクロールすることはできます。一般に Web を閲覧するとき、マウスを直接使用してスクロール バーをドラッグするよりも、スクロール ホイールを使用して Web ページを下にスクロールする回数の方が多いと思います

よね？念のために言っておきますが、マウスにスクロール バーもスクロール ホイールもない友人に会ったら、どうやって Web を閲覧すればよいでしょうか?あ、キーボードの矢印キーの上にある PageUp と PageDown

を使用してページを上下に移動することもできます。また、Space を使用して Web ページをプルダウンし、Shift+Space を使用して Web ページをプルアップすることもできます。さらに、Home キーを押して Web ページの上部に戻り、End キーを押して Web ページの下部に移動することもできます。方法？ただし、これは常に何らかの不都合を引き起こすため、自分のスペースと好みに応じて、このスクロール バーをキャンセルするかどうかを検討してください。

はは、一度にこんなにたくさんの言葉を言ったとは思いませんでした

スクロールバーを追加する方法について話しましょう:

overflow-y: auto; height: 何ピクセル

auto

は自動的にスクロールバーを追加します。設定したオブジェクトの内容が高さで設定した高さを超えた場合、スクロールバーは自動的に追加されます。それ以外の場合は、body{} のデフォルト値は表示されません。 overflow-y: auto;height: ブラウザの高さなので、Web ページのコンテンツがブラウザの高さを超えると、ブラウザの右側にスクロール バーが自動的に表示されます

これを設定する必要がある場合は、設定することをお勧めします最新のコメント #m_comment{}、記事リスト# m_blog{} など、内容や高さが固定されていないテンプレートでは、#m_comment p.item などの ID しかない場合があります。 {} または #m_pro a{} など、持っていない ID を追加して設定できます

スクロール バーを追加する別の方法は次のとおりです:

overflow-y :scroll

このパラメータの機能は上で説明しましたが、このパラメータだけを追加した場合、スクロールバーは表示されるものの、スクロールバーが表示されないため、

height:何px

高さ属性を追加する必要があります上記の方法と似ていますが、根本的な違いがあり、これはオブジェクトの内容に関係なく、高さで設定した高さを超えても常に横にスクロールバーが表示されます

の美化について話しましょう。友人がインターネットで説明を見せてくれましたが、非常に小さいので、より鮮明に見えるようにしました。まず、美化のさまざまな属性について説明します。
SCROLLBAR-FACE-COLOR: カラーコード;

SCROLLBAR-HIGHLIGHT-COLOR: カラーコード;ScrollBar-Shadow-COLOR: カラーコード;

Scrollbar-Rarrow-Color: カラーコード;

ScrollBar-darkshadow-color : カラーコード

たくさんの属性を見ると少し興奮しますか?はは、心配しないでください。先ほど述べた 2 倍に拡大した図を見ていただければ、もっと安心できるでしょう。

この

の画像には、実際には、scroller-base-color 属性もあります。上記の 7 つの属性の合計をどのように表しますか?つまり、この属性の色を設定した後は、前の 7 つの属性を設定する必要はありません。ただし、この設定は、設定したスクロールバーのベースカラーに基づいて行われます。色は自動的に設定されます

この属性の利点は、さまざまな場所の色を学習する必要がないことですが、欠点は、すべての色を 1 つにブレンドできないことです。 。

注: スクロールバーのベースカラーが設定されている場合は、他の 7 つの属性を設定しないでください。そうしないと、競合が発生する可能性があります。エフェクトが機能しません

最後に、私の美化コードをみんなが気に入ってくれるかもしれないことを考慮して、美化コードを投稿しました:

SCROLLBAR-FACE-COLOR: #CCFFFF;

SCROLLBAR-HIGHLIGHT-COLOR:white ;

スクロールバー-シャドウカラー: #813533;

スクロールバー-カラー: #813533;
スクロールバー-ダークシャドウ-色: #813533;
-->

以上がHTML のスクロール バーについて/スクロール バーの削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。