スマホやタブレットでハンバーガーメニューを開いた時に、スクロールできなかったり、慣性スクロールが効かない問題が発生しました。備忘録として解決策を書きます。
※本記事は2020年5月時点の情報です。
■悩みと解決策
① position: fixed;を指定したときスクロールできない(画面が動かない)。
→overflow-y: scroll;を書けばスクロールできるようになる。
②overflow-y: scroll;を書いた。今度は慣性スクロールができない。カクカクした動きになる(滑らかに動かない)。
→HTMLを入れ子構造にする。position: fixed;とoverflow-y: scroll;を分けて書く。
■残課題
・iOSの場合、画面の上端と下端のそれぞれで、画面外(外側へ)へスクロールしようとするとフリーズする(2秒程度)。調べたところ、iOSのバグ。諦めるか、JavaScriptで書くしかない。
最終的に以下のコードで動きました。
-webkit-overflow-scrolling: touch;は削除してよさそうです。
<div class="fade-nav"> <div class="fade-wrap"> ... </div> </div>
.fade-nav { display: none; position: fixed; top: 0; background-color: #fff; width: 100%; height:100%; transition: all .3s ease-in-out; z-index: 100; } .fade-wrap{ width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }