hover時にscrollbarを表示

Slackみたいに、1つのページに2つのscrollbarがある時などに有用

https://gyazo.com/be47a962f870e7f246a19a06209ed739

ここがscrollできますよ

この列が対象ですよ

というのを示せる

通常のページでは自明なので必要ない

ちょっと変わったレイアウトのときに使う

tailwindでやるなら

hover-scrollbarというのを定義しておく

Slackでは「scrollbarっぽいもの」をdivで作っている

各種ブラウザで動かすためには必要なのか

ToDos #??

スクロールの必要がある場合のみ表示したい

今のままだと、コンテンツが完全に収まっていてスクロールできない場合もhoverしたら表示されてしまう

普通にcssでやるなら

code:css

.scrollbox:hover::-webkit-scrollbar {

width: 8px;

}

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

background-color: rgba(0, 0, 0, 0.2);

}

chromeだけだが