くまだどうも、くまだです。
CSSでよくやるスクロールバー非表示について。
スクロールバーの非表示にする方法
デフォルトで表示されるスクロールバーの見た目があまりおしゃれじゃないので、クライアントから非表示にしてください、といわれることがあります。
<div class="content">
<div class="box">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキス</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="box">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキス</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>.content{
height: 200px;
overflow-y: scroll;
/*スクロールバー非表示（IE・Edge）*/
-ms-overflow-style: none;
/*スクロールバー非表示（Firefox）*/
scrollbar-width: none;
}
/*スクロールバー非表示（Chrome・Safari）*/
.content::-webkit-scrollbar{
display:none;
}
.box + .box {
margin-top: 20px;
}上記のコードでスクロールバーを非表示にできます。
よく見かけるコードですが、::-webkit-scrollbarというのは将来的に使えなくなる可能性があります。
スクロールバーを非表示にすることはアクセシビリティの観点からも推奨ではない。
かといって、非表示にしなかったらスクロールバーのデザインが微妙…
そういうときはスクロールバーのデザインをサイトの雰囲気に合わせてしまいます。
/* スクロールバー */
/* スクロールバーの太さ */
::-webkit-scrollbar {
width: 10px;
}
/* スクロールバーの背景 */
::-webkit-scrollbar-track {
background-color: #fff;
}
/* スクロールバーの色 */
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgb(26,45,56,1);
background-color: rgb(26,45,56,1);
}
スクロールバーの色をサイトの雰囲気に合わせつつ、いい感じの太さにしてあげます。
というわけで、最近は安易にスクロールバーは非表示にしないでデザインを変更するようにしています。
ここまで読んでくださりありがとうございました。