hiroeleganceのエレガンスとは呼べない日常

WEB屋hiroelegance(ヒロエレガンス)のブログhiroeleganceのエレガンスとは呼べない日常略して「エレ日」です。YouTubeで毎週火曜0時にラジオを配信しています。

【JS】ハンバーガーメニューdrawer.jsのスクロールが実機で効かない

      2017/07/20

hamburg

ハンバーガーメニューを導入する際に実機で確認するとスクロールが効かなくなってしまってはまってしまったのでメモです。
いくら全体にoverflow:autoをかけてもスクロールできませんでした。
【スクリプト読み込み】
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
<script>
$(document).ready(function() {
$(".drawer").drawer();
});
</script>

【ハンバーガー部分HTML】
<!-- ハンバーガーボタン -->
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>

<nav class="drawer-nav">
<ul class="drawer-menu">
<!-- ドロワーメニューの中身 -->
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</nav>

【参考サイト】
【jQuery】理想的なドロワーメニューの動きを実装できるプラグイン-Drawer-の使い方

こちらのソースを参考にすれば実装が可能です。
しかし、drawer-menuの中に要素を全て含めないとスクロールできなくなります。
今回.drawer-menuを閉じて外に別のクラスを追加したら実機でスクロールできなくなりました。

今回はまってしまって@nomonionに助けてもらいました。感謝!

  広告

 - JavaScript, お仕事