ブラウザのスクロールバーをカスタマイズ【CSS】

CSSでスクロールバーの色とかを変えたりできる。何でもはできないけど。

See the Pen Untitled by nakasu (@nakasu) on CodePen.

webkit系

SafariやChromeは以下のようにしてカスタマイズ可能。

bodyのスクロールバーをカスタマイズしている。

body::-webkit-scrollbar {
  width: 30px; /* 右のスクロールバーの幅 */
  height: 40px; /* 下のスクロールバーの幅 */
}

/* スクロールバーの背景 */
body::-webkit-scrollbar-track-piece {
  background-color: blue;
}

/* スクロールバーのつまみ */
body::-webkit-scrollbar-thumb {
/*   透明度やグラデーションも設定できる */
  background-color: gold;
  
/*   ボーダーは余白のために使うとよい */
  border: 8px solid transparent;
  border-radius: 30px;
  background-clip: content-box;
}

/* 縦横のスクロールバーの間の角 */
body::-webkit-scrollbar-corner {
  background-color: red;
}

Firefox

Firefoxは以下のようにしてカスタマイズ。

html {
/*   スクロールバーのつまみの色・背景色 */
/*   透明度は指定可能だが、グラデーションは不可 */
  scrollbar-color: rgba(255, 0, 0, .5) gold;

/*   スクロールバーの太さ */
  scrollbar-width: thin;
}

参考

https://codepen.io/Neos21/pen/wvWMdJv

stackoverflow.com