【コピペOK】CSSでスクロールバーを表示・非表示させる方法とカスタマイズ

こんにちは、keiです。

悩む人

スクロールバーを表示・非表示させるにはどうしたらいいのかな...？また、CSSでスクロールバーを自由にカスタマイズしてみたい！

こんな悩みに答えます。

サイトを作成する際にボックス内に情報が収まりきれず、スクロールバーを出現させたら使いやすく便利になります。

また、サイトを見ていると横にでているスクロールバーを自由にカスタマイズできたら、サイト全体のデザインがちょっとオシャレになるのに...と思うことがよくあります。

そこで、本記事では、前半にスクロールバーの表示・非表示の方法を簡単に紹介し、記事後半では「webkit」を採用しているブラウザでスクロールバーをカスタマイズする方法をまとめて紹介します。

なお、『Microsoft Edge』や『Firefox』では、CSSのデザインは効かず標準仕様で表示されますので、ご留意ください

実装するまでに難しく感じましたが、簡単に表示設定ができましたので、本記事を読みスクロールバーのカスタマイズが分かりましたら幸いです。

スクロールバーを表示・非表示にする方法

画面横のスクロールバーをカスタマイズを紹介する前に、通常のボックスでスクロールバーを作成して表示・非表示させる方法について紹介です。

まずは、スクロールバーを表示・非表示にする方法です。

スクロールバーを表示させるには、

・X軸方向のスクロールバーを表示したい場合は overflow-x: scroll;

・Y軸方向のスクロールバーだけを表示する場合は overflow-y: scroll;

こんな感じで、『擬似要素』を追加します。

擬似要素は、要素の１部に対してスタイルを適用できる指定方法です。

これでスクロールバーを出現させる感じです。

縦向きのスクロールバーを出現させたい場合は『overflow-y: scroll;』を指定して、横向きでは『overflow-x: scroll;』を入れてあげればOKです。

KEI

また、スクロールバーを非表示させるには、以下の要素を追加します。

 command
overflow: hidden;

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

ここからは、ブラウザ横にあるスクロールバーをCSSでカスタマイズする方法です。

ブラウザ横のスクロールバーをカスタマイズするには、主に以下の『擬似要素』を入れます。

 command
::-webkit-scrollbar
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb

参照元：https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

『::-webkit-scrollbar』

スクロールバーの「幅」や「高さ」を指定して調整する場合は、『::-webkit-scrollbar』を入れてあげます。

 command
::-webkit-scrollbar

この『::-webkit-scrollbar』を指定してあげて、スクロールバーの横幅を調整するには、

 command
::-webkit-scrollbar {
width: 10px;
}

といった感じで、「px」指定をしてあげます。

『::-webkit-scrollbar-track』

続いて、『::-webkit-scrollbar-track』では、スクロールバーのツマミ部分の背景色を変更できます。

 command
::-webkit-scrollbar-track {
background: #f1f1f1;
}

上記のように、「background:;」で色の指定をしてあげて背景色を変えます。

あまり目立つ色よりかは、落ち着いたグレーなどの背景色にしてあげるのがオススメです。

KEI

また、『border-radius:;』プロパティを入れることで、スクロールバーの角に丸みを付けることもできます。

 command
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
}

付ける時は、上記のように「px」指定をします。

『::-webkit-scrollbar-thumb』

最後に、スクロールバーのツマミ部分のカスタマイズです。

スクロールのツマミ部分の指定は、「::-webkit-scrollbar-thumb」を入れてあげます。

 command
::-webkit-scrollbar-thumb {
background: #888;
}

『::-webkit-scrollbar-track』の時に紹介したように、『border-radius:;』プロパティを入れることで、ツマミ部分にも角に丸みを付けられます。

また、スクロールバーを透明にしてみたいと思った場合は、「rgba(0,0,0,0.5)」を指定してあげて背景を透明に変えられます。

 CSS
::-webkit-scrollbar-track {
   background: rgba(0,0,0,0.5);
}

上記のように、指定してあげます。

なお、「rgba()」でカラーモデルを指定する際の考え方は、以下の記事が参考になります！

>> CSS3リファレンス rgba()

※クリック後、外部リンクに飛びます

CSSでスクロールバーをカスタマイズしてみよう！：まとめ

今回は、CSSでスクロールバーを表示・非表示させる方法と、ブラウザの画面横にあるスクロールバーのデザインをカスタマイズする方法を紹介しました。

スクロールのデザインをちょっと変えるだけでもサイトの印象も変わるので、使ってみるのがオススメです。

暇な時間にでもカスタマイズしてみてください！

ここまで読んでいただきありがとうございました。