share facebook facebook twitter menu hatena pocket slack

2017.08.17 THU

CSSでスクロールバーをカスタマイズ

工藤 響己

WRITTEN BY 工藤 響己

webkit系のSafariとChrome限定ですが、CSSプロパティ::-webkit-scrollbarでブラウザのスクロールバーをカスタマイズできます。

Mac OSのオシャレUI…

OS X以降のMacOSではスクローラブルな要素に対してもスクロールバーは非表示で、スクロールが始まったタイミングで初めてふわりと表示させる仕様になっています。
お洒落な演出ですが、この演出のせいでスクロールバー非表示のMacとスクロールバー常時表示のWinでレイアウトがずれてしまうという困った現象が起きます。
OSが違うだけで全く同じブラウザ相手なのでブラウザハックも使えません。

でも::-webkit-scrollbarを覚えておけばもう安心!

応用

::-webkit-scrollbarを特定のクラスの中(下記の例なら.container内)に書けば、そのクラスの中だけでスクロールバーのデザインを変えることができます。
メディアクエリを使ってスマホ時とPC時のスクロールバーを異なるデザインにするのも良さそう。

HTML&CSS

index.html

 

scrollbar.css

 /*スクロールバー全体*/
::-webkit-scrollbar {
    width: 10px;
}

/*スクロールバーの軌道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}

/*スクロールバーの動く部分*/
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 50, .5);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

.container{
  width: 100%;
  height: 400px;
  overflow: auto;
}

.inner{
  background-image: url("http://lorempixel.com/800/800/");
  background-repeat: no-repeat;
  width:100%;
  height:800px;
}

サンプル

https://jsfiddle.net/6m7bpu5e/4/

元記事はこちら

CSSでスクロールバーをカスタマイズ

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。