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

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>

関連する推奨事項:

css 固定 div ヘッドではスクロールしませんスクロール バー

css レイヤー スクロール バー_エクスペリエンス交換

以上がCSSでスクロールバーを設定するにはどうすればよいですか? CSSスクロールバーの設定方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。