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

公開日:2018-12-30
最終更新:2018-12-30
※この記事は外部サイト(https://qiita.com/_lemon2003_/items/012021...)からのクロス投稿です

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

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@lemon2003の技術ブログ

よく一緒に読まれている記事

0件のコメント

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

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする