今回、Jqueryプラグイン「drawer」でiPhoneのスクロールができない対処法をお伝えします。

iOS12.1のiPhoneでドロワーメニューを開いているにもかかわらず、メインコンテンツのスクロールがされてしまい、ドロワーメニューが閉じてしまう問題を解決します。

解決方法は簡単で、CSSで以下を追加すれば完了です。

  .drawer--top.drawer-open .drawer-nav {
    top: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .drawer--left.drawer-open .drawer-nav,
  .drawer--left .drawer-hamburger,
  .drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .drawer--right.drawer-open .drawer-nav,
  .drawer--right .drawer-hamburger,
  .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
    right: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

たったこれだけですので、悩んでいる方がいましたら、是非お試しあれ！