スクロールできない、慣性スクロールが効かない問題を解決した。

スマホやタブレットでハンバーガーメニューを開いた時に、スクロールできなかったり、慣性スクロールが効かない問題が発生しました。備忘録として解決策を書きます。

※本記事は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;
}