Posted at

position: fixedの子要素をスクロールできるようにする

More than 1 year has passed since last update.

位置を固定したいけど、中の要素はスクロールしたい時用の小技(ドロワーメニューとか)。


デモ

See the Pen ZLzOOG by Yoshiaki Itakura (@negibouze) on CodePen.


実装(デモから抜粋)

やることは単純でスクロールさせたい要素に高さを指定してあげるだけです。

nav.right

ul.scrollable
li.item メニュー 01
li.item メニュー 02
li.item メニュー 03
li.item メニュー 04
li.item メニュー 05
li.item メニュー 06
li.item メニュー 07
li.item メニュー 08
li.item メニュー 09
li.item メニュー 10

nav

position fixed
width 200px
height 150px
overflow hidden
> ul
width 100%
padding 0 14px 0 0
margin 0
list-style none
overflow-y auto
background-color: #efefef;
&.scrollable
height 100% <- これだけ
> li.item
width 100%
height 50px
line-height 50px
text-align center
border-bottom solid 1px #c8c8c8
cursor pointer