【CSS】iOSのハンバーガーメニューがスクロールできない場合の修正方法

スマートフォンでハンバーガーメニューのコンテンツ量が多く
スクロールをさせたい場合、positionプロパティとoverflowプロパティを指定することがありますが、
iOSで以下のような設定をしてしまうとハンバーガーメニューのスクロールが効かなくなります。

  • positionプロパティがabsoluteまたはfixed
  • heightプロパティが固定幅(相対値、絶対値)
  • overflowプロパティがスクロール指定(autoやscroll)
  • -webkit-overflow-scrollingプロパティがtouch
  • 同じ要素にpositionプロパティとoverflowプロパティを指定

実際のcssで以下のような記述の場合、正常にスクロール動作しません。

.menu {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

positionプロパティとoverflowプロパティを別の要素に指定するとスクロール出来るようになります。

/* 位置指定用 */
.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* スクロール用 */
.menu .inner {
    overflow: auto;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}
参考:https://shanabrian.com/web/html-css-js-technics/css-ios-safari-02.php

関連記事

コメントを残す

*