スクロールバーのデザインをいろいろ弄って遊んでみる。

tl;dr

  • 味気ないスクロールバーをcssでデザインして遊ぶ。

百聞は一見に如かず。

See the Pen Scrollbar Design Test by lemon2003 (@lemon2003) on CodePen.

グラデとかの使い方間違ってる?
ダssssっさ。

解説

::-webkit-scrollbar

width で縦スクロールバーの幅、
height で横スクロールバーの高さを指定できる。

::-webkit-scrollbar-track

スクロールバー全体のスタイルを指定する。

::-webkit-scrollbar-thumb

thumb親指

スクロールするときにマウス(カーソル)でつかむところ。

参考

最後に & お願い

-webkit とついているように、chromeなどでのみ動きます。
firefoxもなんかいろいろ弄ればできるっぽいけど、今回は割愛。(書き足すかも?)

こんなこともできるよっていう風にいろいろcss弄ったけど、センスのないものしかできなかったので、
いいデザインができたら、こんなのどう?っていう感じでコメントしていただければ幸いです! (完全に丸投げ。)