システム情報

jPanelMenuでスクロール

iPhoneのOSアップデートに伴って、制作したWordPressサイトが正しく動かなくなってしまったので、少し改造しました。

スマホサイトで横に飛び出すメニューを搭載させていたのですが、それがなぜか新しいOSにアップデートしたら、メニュー部分がスクロールせず、コンテンツ部分がスクロールしてしまったので、コードを書き直しました。

変更前

<script>
  jQuery(function($) {
    var jPM = $.jPanelMenu({
      menu: '#sidr',
      trigger: '#sp_menu',
      direction: 'right',
      closeOnContentClick: true
    });
    jPM.on();
    var ua = navigator.userAgent.toLowerCase();
    if (!ua.match(/chrome|android 4.[1-9]|android [5-9]|firefox|iphone os [5-9]/)) {
      $('#jPanelMenu-menu').css({height: "auto"});
    }
  });
</script>

変更後

<script>
  jQuery(function($) {
    var jPM = $.jPanelMenu({
      menu: '#sidr',
      trigger: '#sp_menu',
      direction: 'right',
      closeOnContentClick: true
    });
    jPM.on();
    var ua = navigator.userAgent.toLowerCase();
    if (!ua.match(/chrome|android 4.[1-9]|android [5-9]|firefox|iphone os [5-9]|iphone os [10]/)) {
      $('#jPanelMenu-menu').css({height: "auto"});
    }
  });
</script>

変更したのは11行目の末尾部分だけです。インラインスクロールに関する記述部分を変更しました。

プライムストラテジー株式会社さんの「WordPressの教科書2」を参考に記述しております（いつも大変お世話になっております）。

とりあえずこのコードで正しく動いたので、掲載しておきます。変更があれば、都度書き直します。

関連記事

TOP