【CSS】スクロールバーの色変更と横スクロールバーを出す方法

スクロールバーの色変更

最近よくやるやつ。

ググればいいんだけどどうもググったやつを適用しても全然反映されない。

下記ならうまくいくので、何も考えずコピペする事にした。という備忘録的記事。

.text_box::-webkit-scrollbar{ /* スクロールバー全体 */
width: 15px;
}

.text_box::-webkit-scrollbar-thumb{ /* スクロールバーのある部分 */
background: #F70841;
border-radius: 10px;
}

横スクロールバーを出す方法

親と子のシンプルHTMLを想定。
ポイントは何故かinline-blockにしないと上手くいかない事くらい。
これもコピペ用。

/* 親のコンテナ */
div.container {
white-space: nowrap;
overflow-x: scroll;
}
/* 子要素。横スクロールリストの要素 */
div.item {
display: inline-block;
white-space: normal;
}