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

CSSでは「scrollbar-color」プロパティでスクロールバーの色を設定できます。このプロパティは２つのパラメータを受け取りますが、1つ目はスクロールバーのスライダーの色、2つ目はスライダー以外の領域の背景色を設定するのに使われます。

例を次に示します。

/* 设置滚动条颜色 */
/* Webkit 内核浏览器 */
::-webkit-scrollbar {
width: 10px; /* 设置滚动条宽度 */
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background-color: #ff0000; /* 设置滑块颜色 */
}
/* 滚动条滑块以外区域 */
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 设置滑块以外区域的背景颜色 */
}

Webkitカーネルを利用するブラウザ(Chrome, Safari 等)でのみ動作することに注意。他のブラウザとの互換性を持たせるには、同様のCSSプロパティを使用してスクロールバーの色を設定できます。詳細は、ブラウザの公式ドキュメントを参照してください。