(ほぼ)HTML+CSSのみ
hover時のみスクロールバーが表示される、fixedサイドバーをHTML+CSSで作りました。
See the Pen fixed sidemenu by mm (@mormormmmr) on CodePen.
js使ってるじゃん
footerに到達した時にスクロールがついている要素の高さを変える必要があったため、その部分だけjsを使用しています。
(親要素にpadding-bottomをつける、でもいいんですが…)
footerがなければ、jsは無視して大丈夫です。
なんで作ったの
少し前に相談されて、その時はjs使わなきゃ無理かなと思ってたのですが、最近ふと:hoverで出来るじゃん、と気づきまして…。
むしろ何で相談された時に気づかなかったんだろう…。
scrollbarの出現時にtransitionはかかりませんが、背景色等が全て不透明なのであれば、
- sidebar__inner::beforeでスクロールバーの上にベースと同じ色を乗せておいてtransitionを設定
- sidebar__inner:hover::beforeで背景色なり不透明度なりを弄る
という手もあるかと思います。