スクロールバーのブラウザー対応が進んでカスタマイズできるようになってきたよ、のお話。

スクロールバーのカスタマイズってfirefoxとかedgeとかで使えなかったイメージがありましたが、Can i useで調べてみたところ今はどうやらほとんどのブラウザで対応しているようです！

参考

.scrollbox{
	height: 200px;
	overflow: auto;
}

/*スクロールバーの横幅指定*/
.scrollbox::-webkit-scrollbar {width: 9px;}

/*スクロールバーの背景色・角丸指定*/
.scrollbox::-webkit-scrollbar-track {
	border-radius: 3.5px;
	background: none;
}

/*スクロールバーの色・角丸指定*/
.scrollbox::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: #DDDDDD;
	border-right: 2px solid #FFF;
}

.scrollbox-text {
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1.4rem;
}