CSSでスクロールバーのスタイルを変更する方法

青灯夜游
リリース: 2023-01-05 16:08:04
オリジナル
13502 人が閲覧しました

CSS では、scroller-face-color、scroller-arrow-color、その他の属性や、「::-webkit-scrollbar」や「::-webkit-scrollbar-thumb」などのセレクターを使用できます。スクロールバーのスタイルを変更します。

CSSでスクロールバーのスタイルを変更する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS 設定コード:

*{
scrollbar-face-color:#fff;/*滑块颜色*/ 
  scrollbar-arrow-color:#000; /*箭头颜色*/
  scrollbar-shadow-color:#000000; /*滑块边线颜色*/
  scrollbar-track-color:#dde3fa; /*滑轨颜色*/
}
ログイン後にコピー

この設定はすべてのスクロール バーに影響します。

CSSでスクロールバーのスタイルを変更する方法

他のブラウザと互換性を持たせるには、まだいくつかの作業が必要です。ここでは、Webkit ブラウザーの設定をいくつか示します。同様に、最初にそのプロパティを理解する必要があります。

::-webkit-scrollbar{}/*整体设置*/
::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track :外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece :内层轨道,具体区别看下面gif图,需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb :滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner :边角,两个滚动条交汇处
::-webkit-resizer :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)
ログイン後にコピー

疑似要素を使用して CSS を設定します。

CSSでスクロールバーのスタイルを変更する方法

次のコードの追加を続けます

::-webkit-scrollbar{background-color: #000}
::-webkit-scrollbar-track {
background-color: #7dc2f6;
} 
::-webkit-scrollbar-thumb {
background-color: #1b99f7;
} 
::-webkit-scrollbar-button {
background-color: #b9e0fd;
} 
::-webkit-scrollbar-corner {
background-color: #018ef8;
}
ログイン後にコピー

出力を再度テストします。これで、IE ブラウザと Google ブラウザの両方で変更が確認できるようになります。

CSSでスクロールバーのスタイルを変更する方法

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSでスクロールバーのスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート