CSSでスクロールバーを設定するにはどうすればよいですか? CSSスクロールバーの設定方法の詳細な例-CSSチュートリアル-php.cn

CSSでスクロールバーを設定するにはどうすればよいですか? CSSスクロールバーの設定方法の詳細な例

不言

リリース： 2018-09-14 13:39:54

オリジナル

17921 人が閲覧しました

Web ページのデザインでは、テキストや画像がコンテナーのサイズを超える場合にスクロールバーのスタイルが表示されるように、スクロールバーのデザインが非常に必要です。では、CSS でスクロールバーを設定するにはどうすればよいでしょうか。次にCSSスクロールバーの設定方法を説明します。

まず、CSS でスクロールバーを設定するために必要なプロパティを見てみましょう。

1. overflow-y: オブジェクトのコンテンツが指定された高さを超えた場合のコンテンツの管理方法を設定します。オブジェクトが指定された幅を超えています

Parameters:

visible: すべてのコンテンツを表示するために領域を拡張します
auto: コンテンツが制限値を超えた場合にのみスクロールバーを追加します
hidden: 常にスクロールバーを非表示にする
scroll : スクロールバーを常に表示します

2. 高さ: スクロールバーの高さを設定します (後続の値を変更するだけです)。

3. スクロールバーの色のパラメーター設定:

scrollbar-3d-light-color スクロールバーの明るい境界線の色を設定または取得します。
scrollbar-highlight-color スクロールバーを設定または取得します。 3D インターフェイス明るいエッジの色 (ThreedHighlight)
scrollbar-face-color スクロールバーの色を設定または取得します。 3D サーフェス (ThreedFace)
scrollbar-arrow-color スクロールバーの色を設定または取得します方向矢印
scrollbar-shadow -color スクロールバー 3D インターフェイスの暗いエッジ (ThreedShadow) の色を設定または取得します。
scrollbar-dark-shadow-color 暗いエッジ (ThreedDarkShadow) の色を設定または取得します。スクロールバーの
scrollbar-base-color スクロールバーの基本色を設定または取得します

次に、スクロールバーのスタイルを設定する CSS を見てみましょう。

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でスクロールバーを設定した後に非表示にする方法(横、縦)を見てみましょう

多くの人が使用すると言います。 overflow-y: Hiddencss はスクロールバーを非表示にできますが、ターゲットにできるのは div 要素のみであり、ブラウザを非表示にすることはできません。一部の情報では、スクロールバーを非表示にするには、scroll="no" をに追加します。水平スクロールバーを非表示にするには、style="overflow-x:hidden" を追加します。垂直スクロールバーを非表示にします。

1. 完全に非表示: スクロールバーを非表示にするには、scroll="no" を追加します。

2. 不要な場合は非表示にします: ブラウザウィンドウの幅または高さが大きい場合を指しますページの幅または高さが大きい場合、スクロールバーは表示されません。それ以外の場合は、スクロールバーが表示されます。

3. スタイルシートメソッド:

スタイル = "overflow-x" を追加します。 :hidden" を使用して水平スクロールバーを非表示にします。

style="overflow-y:hidden" を追加して垂直スクロールバーを非表示にします。

最終的な非表示方法:

ページに追加

<style>html {
 overflow-x:hidden; //隐藏水平滚动条
 overflow-y:hidden;//隐藏垂直滚动条
 }
 </style>

ログイン後にコピー