jPanelMenuでスクロール

thumbnail
システム情報

投稿日: 2016年09月22日

最終更新日: 2021年10月15日

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」を参考に記述しております(いつも大変お世話になっております)。

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

各種制作業務

  • オリジナルタトゥーシール制作

  • オーダーメイド刺繍

  • ウェアプリント

  • 名刺・パンフレット制作

  • オーダーカッティングシート制作

  • のぼり旗

Web関連業務

  • スマホ対応サイト制作

  • HP制作実績

  • DTPデザイン作例集