質問: ### 前提・実現したいこと スマホ表示時にdrawer.js()を実装しているサイトを作っています。 メニュー展開時には背景のスクロールを固定するようにしたいです。 一応固定自体はできたものの、下記の問題点があります。 ### 試したこと 下記サイトを参考にhtml,bodyに.fixedを付与する事で、背景の固定をする事ができましたが、問題点は後述します。 drawer.jsの記述に則りセレクタを変更していますが、他は追記など行っておりません。 ``` $('.drawer-toggle').on("click", function() { $('html, body').toggleClass('fixed'); }); ``` ### 問題点 メニューを閉じる際、付与した.fixedの削除をする必要がありますが 上記の記述では.drawer-toggle(この場合ハンバーガーボタン)をクリックしないと削除ができないと思うのですが、 drawer.jsはナビやハンバーガーボタン以外の部分をクリックしてもメニューが閉じますので、 その場合.fixedの削除がされずにスクロールができないページが表示されてしまいます。 あるいは、別の手段をご教授いただけましても大変助かります。 初めての質問で至らぬ点も多くあると思いますが、 どうぞよろしくお願いいたします。 ### 他に試したこと 上記サイトも同じく.fixedの削除の条件がボタンをクリックする事なので 同じ理由で行き詰ってしまいました。
回答: 自己解決しました。 まずこちらのサイトを参考に、下記記述をしてみました。 ``` var scrollpos; $(document).ready(function() { // ドロワーナビが開いたとき $('.drawer').drawer(); $('.drawer').on('drawer.opened', function(){ scrollpos = $(window).scrollTop(); $('html,body').addClass('fixed').css({'top': -scrollpos}); }); // ドロワーナビが閉じたとき $('.drawer').on('drawer.closed', function(){ $('html,body').removeClass('fixed').css({'top': scrollpos}); window.scrollTo( 0, scrollpos ); }); }); ``` ``` .fixed { overflow: hidden; position: fixed; height: 100%; width: 100%; } ``` 背景の固定はするし、質問内容の問題点のクラスの解除も条件を変えたのでクリアです。 ただ、最上部までスクロールしてしまう挙動があり、(おそらく.fixedのCSS、position:fixed;のせいかと) そちらをうまく扱う事が出来なかった為、別のサイトを参考に下記の記述に変更しました。 ``` var movefun = function( event ){ event.preventDefault();} $(document).ready(function() { // ドロワーナビが開いたとき $('.drawer').drawer(); $('.drawer').on('drawer.opened', function(){ // スクロール停止の処理 window.addEventListener( 'touchmove' , movefun , { passive: false } ); }); // ドロワーナビが閉じたとき $('.drawer').on('drawer.closed', function(){ // スクロール停止することを停止する処理 window.removeEventListener( 'touchmove' , movefun, { passive: false } ); }); }); ``` 以上でばっちり固定されました。