8
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

hover時のみスクロールバーが表示されるfixedサイドバー

Last updated at Posted at 2018-07-27

(ほぼ)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で背景色なり不透明度なりを弄る

という手もあるかと思います。

8
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?