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

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

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

CSS 設定コード:

*{
scrollbar-face-color:#fff;/*滑块颜色*/ 
  scrollbar-arrow-color:#000; /*箭头颜色*/
  scrollbar-shadow-color:#000000; /*滑块边线颜色*/
  scrollbar-track-color:#dde3fa; /*滑轨颜色*/
}

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

他のブラウザと互換性を持たせるには、まだいくつかの作業が必要です。ここでは、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 を設定します。

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

::-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でスクロールバーのスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。