BETA

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

投稿日:2018-12-30
最終更新:2018-12-30

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弄ったけど、センスのないものしかできなかったので、
いいデザインができたら、こんなのどう?っていう感じでコメントしていただければ幸いです! (完全に丸投げ。)

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@lemon2003の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう