fomantic-uiでモーダル画面でバージョンアップ時にスクロールバーが常時表示できない

2024年7月29日

今回はfomantic-uiのバージョンアップを行った際にモーダル画面のスクロールバーが常時表示できないとき、私はどう対処したのかについてご紹介していこうと思います。

fomantic-uiのバージョンは2.9.3です。

fomantic-uiでモーダル画面でバージョンアップ時にスクロールバーが常時表示できない

スクロールバーを常時表示させたい場合、一般的には下記のようなwebkit-scrollbarを設定すると思います。

.scrollable::-webkit-scrollbar {
  width: 12px; /* スクロールバーの幅を設定 */
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: #888; /* スクロールバーのサムの色を設定 */
  border-radius: 6px; /* スクロールバーのサムの角を丸くする */
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* ホバー時のサムの色を設定 */
}

.scrollable::-webkit-scrollbar-track {
  background: #f1f1f1; /* スクロールバーのトラックの色を設定 */
}

.scrollable::-webkit-scrollbar {

width: 12px; /* スクロールバーの幅を設定 */

}

.scrollable::-webkit-scrollbar-thumb {

background-color: #888; /* スクロールバーのサムの色を設定 */

border-radius: 6px; /* スクロールバーのサムの角を丸くする */

}

.scrollable::-webkit-scrollbar-thumb:hover {

background-color: #555; /* ホバー時のサムの色を設定 */

}

.scrollable::-webkit-scrollbar-track {

background: #f1f1f1; /* スクロールバーのトラックの色を設定 */

}

しかし私の場合、fomantic-uiを使っておりますがfomantic-uiのバージョンアップ後、上記のような設定をしてもスクロールバーが常時表示できない箇所がありました。
fomantic-uiを2.8.8から2.9.3を上げたときにこの状況に陥りました。

結論として私はどう対処したのかというと、fomantic-uiをバージョンアップしたときに別の設定においてscrollbar-colorなどが
scrollbar-color: rgba(0, 0, 0, .25) rgba(0, 0, 0, .1); scrollbar-width: thin;
のような設定になっており、CSSを上書きして
scrollbar-color:initial; scrollbar-width:initial;
のようにスタイルの初期値をリセットするとスクロールバーが常時表示されるようになりました。

みなさんもぜひお試しください。