HTML_HTML/Xhtml_Webページ制作におけるスクロールバーの問題/スクロールバーの削除について

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

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

しかし、同じコードでは、私たちのアプリケーションは xhtml では動作しません。多くの友人が同じ問題に遭遇していると思います。

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


このコードと前の段落の唯一の違いは、CSS で定義された要素の一方が body で、もう一方が body であることです。 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 の定義は効果がありません。私たちが定義する は単なるサブ要素です。 OK、原理はわかったので、「body」または「xhtml」の定義を「*」に変更して実験してみましょう:


* はページ上の任意のタグを定義するため、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 ページを閲覧すると、水平スクロール バーと垂直スクロール バーが表示されます。これは IE6 のバグであり、Firefox にもあります。通常、その理由は、XHTML 1.0 の暫定的な doctype の解釈における欠陥によるものです。

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



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

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


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


すべて非表示


または


スクロール バーの属性コードは次のとおりです:
overflow-y: 表示 | 非表示 |
表示: コンテンツを切り取ったり、スクロール バーを追加したりしません。
auto: 必要に応じてコンテンツを切り取り、スクロール バーを追加します。
hidden: オブジェクトの高さを超えるコンテンツを表示しません。必要に応じて、この属性はここでは紹介されません。
スクロール: 常に垂直スクロール バーを表示します

まず、スクロール バーを削除する方法について説明します。
Baidu スタイル テンプレートを使用する場合、スクロール バーは 1 つだけです。スペース全体の右側にある最大のブラウザ ウィンドウのスクロール バー、つまり、これは私が美化したスクロール バーです。このスクロール バーは削除できますが、ブラウジング方法には影響しません。
本文にoverflow-yを追加
{}:
visible これだけでスクロールバーは表示されなくなります。このように引き下げるにはどうすればよいのかと疑問に思われるかもしれません。あはは、ブラウジングには影響しないと言いましたが、ブラウズする方法は
マウス ホイールを使用することです。スクロール バーは消えていますが、マウス ホイールを使用して Web ページを上にスクロールすることはできます。下。一般に Web を閲覧するとき、スクロール バーをマウス
で直接ドラッグするよりも、スクロール ホイールを使用して Web ページを下にスクロールする回数が多いと思います。念のために言っておきますが、マウスにスクロール バーもスクロール ホイールもない友人に会ったら、どうやって Web を閲覧すればよいでしょうか?あ、キーボードの矢印キーの上にある PageUp と PageDown
を使用してページを上下に移動することもできます。また、Space を使用して Web ページをプルダウンし、Shift Space を使用して Web ページをプルアップすることもできます。さらに、Home キーを押して Web ページの先頭に戻り、End キーを押して
を押すと Web ページの下部に到達します。方法は？ただし、これは常に不便を引き起こすため、自分のスペースと好みに応じて、このスクロールバーをキャンセルするかどうかを検討してください。

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

スクロール バーを追加する方法について話しましょう:
overflow-y: auto;height: how many px
auto
は、設定されたオブジェクトの内容が height で設定された高さを超える場合、スクロール バーを自動的に追加します。それ以外の場合は、body のデフォルト値は表示されません。 {} は
ですoverflow-y: auto;height: ブラウザの高さなので、Web ページのコンテンツがブラウザの高さを超えると、ブラウザの右側にスクロール バーが自動的に表示されます
これを設定する必要がある場合
を推奨します最新のコメント #m_comment{}、記事リスト #m_blog{}、および内容と高さが固定されていないその他のテンプレートに設定されます。たとえば、#m_comment div しか持たない友達もいます。 item{ } や #m_pro a{} などの場合は、ID を自分で追加して設定できます。

スクロール バーを追加する別の方法は次のとおりです:
overflow-y :スクロール
このパラメータの機能は上で説明しましたが、このパラメータだけを追加した場合、スクロールバーは表示されますが、スクロールバーが表示されないため、
高さ: いくつを追加する必要がありますpx
height 属性は上記のメソッドと似ていますが、オブジェクトのコンテンツの高さが height で設定した高さを超えているかどうかに関係なく、スクロール バーは常に横に表示されます

以下、それについて話しましょう。 スクロールバーの美化については、友人がインターネットで説明を見せてくれました。上の写真はとても良いと思いますが、非常に小さいので、サイズを2倍にして、より鮮明に見えます。まず各属性について説明します:

コードは次のとおりです: SCROLLBAR-FACE-COLOR: カラーコード;

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

SCROLLBAR-3DLIGHT-COLOR: カラーコード; 🎜>SCROLLBAR-ARROW-COLOR: カラーコード;

SCROLLBAR-TRACK-COLOR: カラーコード;


うなずいているかたくさんの属性が見えますか？はは、心配しないでください。先ほど述べた 2 倍に拡大した図を見ていただければ、もっとよくわかるでしょう。

この図には、実際には、scroller-base-color 属性もあります。属性 上記7つの属性の合計です。つまり、この属性の色を設定した後は、前の 7 つの属性を設定する必要はありません。スクロール バーによって自動的に設定されますが、この設定はスクロールバーのベースに基づいて行われます。この属性の利点は、全員がさまざまな場所の色を研究する必要がないことですが、欠点は、すべての色を 1 つに混合できないことです。 。

注: 他の 7 つの属性を設定しないでください。設定しないと、競合が発生する可能性があります。いくつかのエフェクトは機能しません

最後に、私の美化コード [とても臭いです~] を気に入っていただけるかもしれないことを考慮して、私の美化コードを投稿しました:





コードをコピーします


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

SCROLLBAR-FACE-COLOR: #CCFFFF;

SCROLLBAR-HIGHLIGHT-COLOR : 白; スクロールバー-シャドウカラー: #813533; スクロールバー-矢印カラー: #813533; SCROLLBAR-DARKSHADOW-COLOR: #813533;

本文に上記のコードを追加しました{}