CSSでスクロールバーをカスタマイズする方法
1. スクロールバーの表示・非表示
スクロールバーの表示・非表示の設定には、overflow プロパティを使用します。
.xxx {
overflow: visible; /* 内容が収まらない場合、はみ出して表示 (初期値) */
overflow: hidden; /* 内容が収まらない場合、非表示 */
overflow: auto; /* 内容が収まらない場合、スクロールバーを表示 */
overflow: scroll; /* 常に縦横スクロールバーを表示 */
}
常に縦か横のスクロールバーを表示させたい場合
縦か横どちらか片方のスクロールバーを常に表示させたいときは下記のように設定します。
.xxx {
overflow: hidden;
overflow-x: scroll;
/* overflow-xが横スクロール、overflow-yが縦スクロール */
}
スクロールはさせたいけどスクロールバーは非表示にしたい場合
overflow: hidden;
はスクロールバーを非表示にしてスクロールもできないようにします。スクロールバーは非表示にしたいけどスクロールの機能は残したい場合は下記のように設定します。
.xxx {
-ms-overflow-style: none; /* IE */
scrollbar-width: none; /* Firefox */
}
.xxx::-webkit-scrollbar {
display: none;
}
2. スクロールバーのデザイン変更に使う CSS
スクロールバーのデザインを変更したいときには-webkit-scrollbar
プロパティを使用します。この設定は Firefox と IE には現在適用できません。
::-webkit-scrollbar {
} /* スクロールバー全体の幅などを指定 */
::-webkit-scrollbar-track {
} /* スクロールバーの軌道 */
::-webkit-scrollbar-thumb {
} /* スクロールバーの動く部分 */
::-webkit-scrollbar-corner {
} /* スクロールバーが交差する角の部分(縦と横のスクロールバーが表示されるときのみ必要) */
3. Windows のスクロールバーを Mac 風にしたいときの CSS
(左:本物 / 右:Mac 風)
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track {
background: rgba(250, 250, 250, 1);
border: solid 1px rgba(245, 245, 245, 1);
}
::-webkit-scrollbar-thumb {
background: rgba(190, 190, 190, 1);
border-radius: 10px;
box-sizing: border-box;
border: solid 3px rgba(250, 250, 250, 1);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(125, 125, 125, 1);
}
::-webkit-scrollbar-corner {
background: rgba(250, 250, 250, 1);
}
4. デモ
デモの補足説明、左から...
- デフォルト
- Mac 風スクロールバー
- width,height - 5px
- width,height - 10px
- width,height - 15px
- スクロールバー非表示、スクロールは可能