1. ホーム
  2. Web制作
  3. HTML/Xhtml

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

2022-01-10 07:16:51
1.xhtmlにおけるスクロールバーの色について
元のhtmlでは、このようにページ全体にスクロールバーを定義することができました。
コピーコード
コードは以下の通りです。

body{
scrollbar-3dlight-color:#D4D0C8; /*- outermost-left -*/
scrollbar-highlight-color:#fff; /*- second-left -*/
scrollbar-face-color:#E4E4E4; /*- face -*/
scrollbar-arrow-color:#666; /*- arrow -*/
scrollbar-shadow-color:#808080; /*- right-two -*/
scrollbar-darkshadow-color:#D7DCE0; /*- right one -*/
scrollbar-base-color:#D7DCE0; /*- base color -*/
scrollbar-track-color:#;/*- Slide-way -*/
}

しかし、xhtmlに適用した同じコードは動作しませんし、多くの方が同じ問題に遭遇していることでしょう。
では、xhtmlの下でどのようにスクロールバースタイルを適用すればよいのでしょうか。次のコードを見てください。
コピーコード
コードは以下の通りです。

html{
scrollbar-3dlight-color:#D4D0C8; /*- outermost-left -*/
scrollbar-highlight-color:#fff; /*- second-left -*/
scrollbar-face-color:#E4E4E4; /*- face -*/
scrollbar-arrow-color:#666; /*- arrow -*/
scrollbar-shadow-color:#808080; /*- right-two -*/
scrollbar-darkshadow-color:#D7DCE0; /*- right one -*/
scrollbar-base-color:#D7DCE0; /*- base color -*/
scrollbar-track-color:#;/*- Slide-way -*/
}

このコードと先ほどのコードの違いは、cssで定義されている要素が、一方はbody、もう一方はhtmlであることだけです。それでも効果は得られます。では、なぜそうなるのでしょうか?
次のグラフを見てみましょう。
htmlの最も基本的なドムツリー構造です。
もう一度、htmlとxhtmlの定義を見てみましょう。
HTML(Hyper Text Markup Language)は、ハイパー・ドキュメント・マークアップ言語と呼ばれ、インターネット上で広く使われています。HTMLは、テキスト参照のレンダリング方法やハイパーリンクが他のページに接続する方法について記述しています。
XHTML(Extensible Hypertext Markup Language)は、HTMLと体裁が似ているが、より構文的に厳密なマークアップ言語である。継承という点では、HTMLがSGMLをベースにした柔軟なアプリケーションであるのに対し、XHTMLはSGMLのサブセットであるXMLをベースにしている。
最も根本的な理由は、htmlをより構造化・標準化するためです(htmlは本当にクソですから)。
OK]を、我々は上記の構造ツリーに戻ってくる、我々はhtmlでボディを定義し、htmlは非常に標準的ではないので、これは効果を取ることができ、xhtmlのようにそれが動作しない、私はその図を見て明らかである、ボディタグ自体がルート要素ではなく、唯一のhtmlは、ルート要素、およびページのスクロールバーもルート要素に属しているので、これはなぜ我々はOK、我々は原理を知って、テストを行う場合&QUOT定義されています。 body" や "xhtml" の定義が "*" に置き換わっているかどうかのテストを行うためです。
コピーコード
コードは以下の通りです。

*{
scrollbar-3dlight-color:#D4D0C8; /*- outermost-left -*/
scrollbar-highlight-color:#fff; /*- second-left -*/
scrollbar-face-color:#E4E4E4; /*- face -*/
scrollbar-arrow-color:#666; /*- arrow -*/
scrollbar-shadow-color:#808080; /*- right-two -*/
scrollbar-darkshadow-color:#D7DCE0; /*- right one -*/
scrollbar-base-color:#D7DCE0; /*- base color -*/
scrollbar-track-color:#;/*- Slide-way -*/
}

htmlでもxhtmlでも通りますが、これは*がページ上のあらゆるタグの定義であり、もちろん"html"タグも含まれるからです。
(ps: 実際にはhtmlとxhtmlの違いというより、XHTML 1.0 transitional doctypeを持つかどうかの違いですが、XHTML 1.0 transitional doctypeをページから削除すると、そのページはdoctypeがなく、デフォルト表示が (html4.01, ただしXHTML 1.0 transitional doctype を HTML 4.01 doctypeに変更しなければならず、このページの基準は html 4.01 ですがページ定義体も機能しない)になっています。
2. xhtml下のフレームページで横スクロールバーが表示される問題
フレーム付きxhtmlのページをie6で閲覧すると、デフォルトで水平・垂直スクロールバーが一緒に表示されます。これはie6のバグで、firefoxでは正常です。この理由は、XHTML 1.0 transitional doctypeの解釈の不具合です。
このバグに対する一般的な解決策は3つあります。
方法1.
コード
html { overflow-y: scroll; }.
[...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]
まず最初に、スクロールバーを消す方法について説明します。
Baiduスタイルのテンプレートを使用する場合、考えられるスクロールバーは1つだけで、それは私が美化した、全体のスペースの右側にある最大のブラウザウィンドウのスクロールバーである。
本文中
Overflow-yを含む{} :
を表示させると、スクロールバーが表示されないように動作します。どうやったらこんな風にスクロールできるんだ、と思われるかもしれません。あ、ブラウジングに影響しないと言ったからには、確かにブラウジングの方法はあるわけで、その方法は
スクロールバーはなくなりましたが、マウスホイールは、ページを上下にスクロールさせることができます。私は、我々は一般的にWebページをプルダウンするには、スクロールホイールでウェブを閲覧すると、スクロールバーをドラッグするマウスの直接使用よりも多くする必要があると信じている回
ここでは、スクロールバーを追加する方法を説明します。
overflow-y : auto;height:何pxか。
オート
は、スクロールバーを追加するかどうかを自動的に判断するもので、設定されたオブジェクトの内容がheightで設定された高さを超えた場合、自動的にスクロールバーを追加し、それ以外の場合は表示しない、body{}のデフォルトの値は次の通り。
overflow-y : auto;height:ブラウザの高さ、つまりページの内容がブラウザの高さを超えると、自動的にブラウザの右側にスクロールバーが表示されるようになります。
こんな人
この設定が必要な場合は、最新コメント#m_comment{}、記事一覧#m_blog{}など、内容や高さが固定されていないテンプレートに設定することをお勧めします、これらのテンプレートが見つからない方もいらっしゃるでしょう
ここでは、スクロールバーを追加する別の方法を紹介します。
オーバーフロー-Y :スクロール
このパラメータの目的は上で説明したとおりですが、このパラメータだけを追加すると、スクロールバーは表示されますが、スクロールバーは表示されませんので、さらに
高さ:何px
height プロパティは、上記の方法と似ていますが、根本的な違いがあり、オブジェクトのコンテンツの高さが height で設定した高さを超えているかどうかに関係なく、スクロールバーは常に横に表示されます。
次はスクロールバーの美化についてです、友人がネット上の説明を見せてくれました、上の図はとても良いと思いますが、とても小さいので2倍にしたらもっと分かりやすくなりました、美化のいろいろな特性について説明しましょう。
コピーコード
コードは以下の通りです。

SCROLLBAR-FACE-COLOR: Color code;
SCROLLBAR-HIGHLIGHT-COLOR: Color code;
SCROLLBAR-SHADOW-COLOR: Color code;
SCROLLBAR-3DLIGHT-COLOR: Color code;
SCROLLBAR-ARROW-COLOR: Color code;
SCROLLBAR-TRACK-COLOR: Color code;
SCROLLBAR-DARKSHADOW-COLOR: Color code;

皆さん、たくさんの属性を見て、ちょっと圧倒されていませんか?大丈夫、先ほどのイラストを2倍に拡大して見ていただければ、気持ちが楽になるはずです。
また、こちらの画像にはscrollbar-base-colorというプロパティがありますが、これは実は上記の7つのプロパティを組み合わせたもので、なんというか...。つまり、このプロパティの色を設定すると
最初の7つのプロパティは、設定する必要がなく、スクロールバーが自動的に設定されますが、この設定は、設定したスクロールバー-ベース-カラーの色に基づいて、自動的に設定されることができます
このプロパティのメリットは、いちいち場所の色を調べる手間が省けることですが、デメリットは、カラフルな色になじまないことです。
注意:scrollbar-base-colorを設定した場合、他の7つの属性を設定しないでください。また、他の7つの属性を設定した場合、scrollbar-base-colorを設定しないでください。さもないと、それらの間で衝突が起こり、いくつかの効果が動作しなくなる可能性があるからです。
最後に、やはり私の美化コードを気に入っていただけるかもしれないと考え、【とても胡散臭い〜】と思いつつ、私の美化コードを以下に掲載させていただきます。
コピーコード
コードは以下の通りです。

SCROLLBAR-FACE-COLOR: #CCFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: white;
SCROLLBAR-SHADOW-COLOR: #813533;
SCROLLBAR-3DLIGHT-COLOR: #813533;
SCROLLBAR-ARROW-COLOR: #813533;
SCROLLBAR-TRACK-COLOR: white;
SCROLLBAR-DARKSHADOW-COLOR: #813533;

body{}に追加した上記のコード。