デザイン
2021.03.02
CSSだけでスクロールバーを変更しよう！
今回はスクロールバーをサイトのデザインに合わせてカスタマイズする方法を紹介していきます！
今回の方法はCSSのみで実装することが可能です。動作が重くなったり、コードがグチャグチャになりづらいのがおすすめポイントです！
しかし、今回紹介する方法は「-webkit-系」で構築します。つまり、Google ChromeとSafariしか使えないという悲しい欠点が・・・。
EdgeやFirefoxでは使えないのでご注意ください。
CSSに記述するのは３つだけ！
実装する際に、使用するプロパティ以下のものになります。
::-webkit-scrollbar
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb
たったのこれだけでスクロールバーのデザインをカスタマイズすることが出来ます。
これは疑似要素扱いのようなのでコロンは２つ付けるようにします。
サンプルコード
それでは、スクロールをカスタマイズするサンプルコードをご紹介します。
#scroll_box {
width: 300px;
height: 200px;
overflow: scroll;
white-space: nowrap;
}
/* スクロールの幅の設定 */
#scroll_box::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* スクロールの背景の設定 */
#scroll_box::-webkit-scrollbar-track {
border-radius: 5px;
box-shadow: 0 0 4px #aaa inset;
}
/* スクロールのつまみ部分の設定 */
#scroll_box::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #1959A8;
}ページ全体のスクロールバーに反映させるには？
サイトによっては、「ページ全体のスクロールバーを変えたい！！」って人もいると思います。
ページ全体のスクロールバーに反映させるためには以下のように記述します。
/* スクロールの幅の設定 */
html::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* スクロールの背景の設定 */
html::-webkit-scrollbar-track {
border-radius: 5px;
box-shadow: 0 0 4px #aaa inset;
}
/* スクロールのつまみ部分の設定 */
html::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #1959A8;
}先ほど、「#scroll_box」にしていたものを「html」に変えるだけですね。
また、「全ての要素に適用させたい！！」という場合は以下のように記述します。
/* スクロールの幅の設定 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* スクロールの背景の設定 */
::-webkit-scrollbar-track {
border-radius: 5px;
box-shadow: 0 0 4px #aaa inset;
}
/* スクロールのつまみ部分の設定 */
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #1959A8;
}IDもクラスもセレクタも指定しない。
ただ、これだけです！！簡単ですね。
まとめ
せっかくサイトをキレイにデザインしたんだから、スクロールバー部分がノーマルのままだと、なんかテンション下がっちゃいませんか？
たった3つの設定で変更できるので自分のサイトに合わせた色や形にしてみてください。
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
