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

 

こんにちは、keiです。

 

 

こんな悩みに答えます。

 

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

 

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

 

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

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

 

 

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

 

 

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

 

 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:;」で色の指定をしてあげて背景色を変えます。

 

 

また、『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でスクロールバーを表示・非表示させる方法と、ブラウザの画面横にあるスクロールバーのデザインをカスタマイズする方法を紹介しました。

 

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

 

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

 

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