ショコラ
Fomantic-UI 溢れたスクロールバーをカスタマイズするには?
fomantic-ui の uiクラスの中だとスクロールバーがカスタマイズできないようなので、
scrollbar-color: initial!important; で初期化しちゃいます。
もっさん先輩
/* fomantic-ui でスクロールバーのスタイルが変えられないのはカラーが指定されていることが原因 */
.ui {
scrollbar-color: initial!important;
}
/* テーブル横移動 */
.x-scrollable {
overflow-x: auto;
}
/* no-scrollbar クラブがあればスクロールバーを表示しません */
.no-scrollbar {
scrollbar-width: none;
}
/* 左右のマージン */
.scrollbar-gutter {
margin:0 14px;
}
/* 色指定 */
.x-scrollable > * {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}
.x-scrollable::-webkit-scrollbar {
height: 4px;
}
.x-scrollable::-webkit-scrollbar-track {
background-color: #fff;
}
.x-scrollable::-webkit-scrollbar-track:hover {
background: #fff;
}
.x-scrollable::-webkit-scrollbar-thumb {
background-color: #141E91;
}
.x-scrollable::-webkit-scrollbar-thumb:hover {
background-color: #141E91;
}
以上