CSSでスクロールバーをカスタムする方法を紹介します。
ここではwebkit系ブラウザでのカスタム方法を紹介します。
よく使われる3つプロパティ-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumbを使用します。
注意点
全てのブラウザ、端末で共通のカスタムを実現をさせるにはSimpleBarなどのJSライブラリの使用をおすすめします。
今回紹介するのはwebkit系ブラウザでのカスタム方法です。
今回紹介するのはwebkit系ブラウザでのカスタム方法です。
SimpleBarスクロールバー JSライブラリ
コード
.box {
overflow: scroll;
}
/* スクロールバーの幅 */
.box::-webkit-scrollbar {
width: 15px; //縦スクロールバーの幅
height: 10px; //横スクロールバーの幅
}
/* スクロールバー背景 */
.box::-webkit-scrollbar-track {
background-color: gray;
border-radius: 20px;
}
/* スクロールバーつまみ */
.box::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
}デモ
See the Pen スクロールバーをカスタムする by yoshi (@mikanbako) on CodePen.
