[CSS] overflow-y: auto; が効かないとき
posted : 2020.04.14
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
今回は完全に僕の僕による僕の為の覚え書き。
なぜか何度もハマりかけてしまうことって少なからずあると思うんですが、そういう系のやつです。
いい加減に覚えてくれ！おれのオツムよ。
overflow-y: auto; が効かない
何故かサイトのメニュー、特にモバイルのハンバーガーメニューを開いた後のメニューリストに overflow-y: auto; が効いてない。
あれれなんでだ？？？
ってこの半年くらいで2、3回やってます。バカです。
というわけで半ば切れ気味に自分に向けて忠告します。
黙ってoverflow-yを指定している要素に高さを指定しろ（指定してるか確認しろ）
height未指定だとスクロールしないことがあるからとにかく指定するのだ。
min-heightじゃない。heightだ。必要に応じてヘッダーの高さ分を引いたcalc(100vh – 〇〇px)を指定すべし。
出来ればメニューの装飾やリスト項目のレイアウト用パディングは子要素以降に指定しろ
position関連, overflow,height以外の装飾スタイルは子要素のulとかにするのだ。
そうすれば少しだけデザインの幅が広がるかもしれない。
なぜこんなことを毎度忘れるのか…
というわけで自分への戒め投稿でした。
