drawer.js でドロワーメニュー内の高さを動的に調節したい

Question

drawer.js を使ってドロワーメニューを表示しています。

商品一覧画面でハンバーガーメニューがタップされたときはグローバルナビを、
「条件を指定する」ボタンがタップされたときは条件指定フォームを、
それぞれ同じドロワー内で出し分けたいと思っているのですが、
スクロールの縦幅指定だけがうまくいきません。

現在のやり方としては、タップされたボタンに応じてdrawer-navの中身を
jsで入れ替えているのですが、要素の高さが変わってしまうと、
$('.drawer').drawer(); が走ったときにドロワー内の要素の高さが記憶されて
しまっているようで、入れ替えた後の要素の高さに合わせる制御ができません。

それがどこで記憶されているのかが分かれば対応のしようがあるのですが、
見つけ出せず困っています。。

現象：
最初の要素の高さが1500pxで、入れ替えた後の要素の高さが1000pxの場合、
1000pxまでしかスクロールしてほしくないが、1500pxまでスクロールしてしまう。
※要素の下部に500pxの空白ができてしまう。

コード：

    if($('body').hasClass("drawer-open")){
        if (drawer_open_flg == false) {
            if($('.filterConditionBtn')){
                if($(this).hasClass('filterConditionBtn')){
                    // 元の要素を非表示
                    $('#sp_gnav').css('display', 'none');
                    // 検索条件フォームの要素を挿入 → 表示
                    $('#itemList_sideNav').clone().prependTo('.drawer-menu');
                    $('.drawer-menu #itemList_sideNav').css('display', 'block');
                }
            }
            drawer_open_flg = true;
            // 背景のスクロール停止
            window.addEventListener( 'touchmove' , movefun , { passive: false } );
        }
    } else if($('body').hasClass('drawer-close')) {
        if (drawer_open_flg == true) {
            if($('.filterConditionBtn')){
                if($('.drawer-menu #itemList_sideNav')){
                    // 検索条件フォームの要素を削除
                    $('.drawer-menu #itemList_sideNav').remove();
                }
                // 元々の要素を表示
                $('#sp_gnav').css('display', 'block');
            }
            drawer_open_flg = false;
            // 背景のスクロール停止を解除
            window.removeEventListener( 'touchmove' , movefun, { passive: false } );
        }
    }
});

.drawer()メソッドを複数回呼べるのであればそうしようと思っていたのですが、
どうもできないっぽいので苦肉の策としてこのようなやり方をしています。

解決策がお分かりの方、もしくはもっとスマートなやり方があれば
ご教示いただけますと幸いです。

よろしくお願い致します。

Answer 1

JSなしバージョンとかどうでしょう？
https://thimbleprojects.org/liveasnotes/535838/

（リンク先ページ右上の「リミックス」ボタンから，コードの閲覧・編集ができます）

gifに映っている部分がドロワーの動きを定義しているCSSです

Comments

[ShotaHirako]

liveAsNotes さん

ご回答ありがとうございます！
すごい…checkboxのon/offで。。
cssってこんな書き方もできるんですね、、とても勉強になります。。

ちなみに、サンプルのコードだと（nav,form内の要素を増やして確認したところ）縦スクロールが上手く動いてない（背面の要素が動いてしまっている）のと、今回やりたいのはドロワーで画面を全て覆うのではなく、左側を20%くらい開けて暗幕をかけハンバーガーメニューを「×」ボタンに切り替えるというようなことをしているのですが、他の要素がクリックされたときに閉じるといった制御も可能でしょうか？

検索条件指定のフォームはPCとスマホで表示する場所が全く違うのでコピーして持ってくる部分はjsで書かないとなのかなと思っていますが、ざっと見た感じは開いてほしいときにcheckboxをonにして、閉じてほしいときにoffにするような書き方をすればちゃんと動くのかな･･･という印象です。

ただ、今からこの書き方にするとなると影響範囲がけっこう大きそうなので判断に悩むところではありますね。。

いずれにしても非常に勉強になりました！ありがとうございます！

[liveasnotes]

「::before」や「::after」などの「擬似要素」についての説明を忘れていました（>_<）っっ

擬似要素は，任意の要素の子要素のように振る舞います．
擬似要素を使う際の注意事項として，
・「:」ではなく「::」である．（「:」は擬似クラスの書き方）
・contentプロパティは必須（特に表示したいものがない場合，content: "";と書く）
があります．

さて，なぜ擬似要素の説明を挟んだかと言いますと，それが柔軟な実装の「鍵」となるからです

```html
<input type="checkbox" id="btn">
<label for="btn">ここを押して</label>
```

```css
[for="btn"]{
background: skyblue;
}
[for="btn"]::before{
content: "ここも押せるよ";
position: fixed;
bottom: 2em;
right: 2em;
background: palegreen;
}
```

これを，https://liveweave.com/などのオンラインエディタにコピペしてみてください．
色違いのボタンが対角線上に配置されるのが確認できると思われます．
そして，どちらのボタンを押してもチェックボックスが効きます

ちなみに，この挙動は「:hover」擬似クラスでも同様です
<div class="d">
<!--contents-->
</div>
に
.d{
position: fixed;
top: 0;
left: 100%;
width: 50%;
height: 100%;
background: rgba(0,0,0,.5);
transition: .5s;
}
.d::before{
content: "";
position: absolute;
top: 0;
left: -50px;
width: 50px;
height: 50px;
background: palegreen;
}
.d:hover{
left: 50%;
}
とするとどうでしょう

画面右上の要素にマウスを乗せてみてください
親要素が擬似的に選択され，ドロワーが出てくる動きを実装できます

手元にスマホがあるなら，このページをスマホで開き，liveweave等に上記のコードをコピペしてみてください．右上のボタンをタップするとドロワーが開き，他の部分をタップすると，ドロワーが自然に閉じるようになっているはずです

次に，PCでも確認してみてください
似たような動作になるはずです

...すみません，実はこの方法は最善の方法ではありませんでした

もう一度PC上でデモを見てください．今説明した「:hover」を利用したデモは，挙動が不安定なことに気付くでしょう．マウスが載っているかいないかという不安定な要件によって，動作が規定されているためです．

ではどうするか，ここで擬似要素の出番です．
といっても，最初から気付いていたかもしれません．
でも，一応説明しておきましょう^^

今度はこれをコピペしてください
```html
<input type="checkbox" id="btn">
<label for="btn">≡</label>
<nav>
<ul>
<li><a href="#">link_1</a></li>
<li><a href="#">link_2</a></li>
<li><a href="#">link_3</a></li>
</ul>
</nav>
```
```css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 18px;
}
input{
display: none;
}
[for="btn"]{
position: fixed;
top: 1px;
right: 1px;
z-index: 10;
width: 50px;
height: 50px;
font-size: 50px;
line-height: 1em;
text-align: center;
background: skyblue;
border: 1px solid #555;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
[for="btn"]::before{
opacity: 0;
content: "";
position: fixed;
top: 0;
left: 0;
width: 20vw;
height: 100vh;
background: rgba(0,0,0,.3);
pointer-events: none;
}
nav{
position: fixed;
top: 0;
left: 100vw;
height: 100vh;
width: 80vw;
padding: 60px;
background: skyblue;
transition: .5s;
}
#btn:checked +label{
font-size: 0;
}
#btn:checked +label::after{
content: "×";
font-size: 50px;
line-height: 50px;
}
#btn:checked +label::before{
opacity: 1;
pointer-events: auto;
transition: .1s .5s;/*後ろ：遅延分*/
}
#btn:checked ~nav{
left: 20vw;
}
```

右上のボタンをクリックすると，メニューが現れ，
左側の領域と「×」ボタンどちらをクリックしても，メニューが閉じるようになっています

もうこの辺りに関しては，これ以上細かい説明も要らないと思います
もし，空白領域に色を付けたくなければ，rgba(255,255,255,0)もしくは，背景色を設定しなければ良いだけです

ただ，
>背面の要素が動いてしまっている
この問題はこれだけでは解決しません．

この辺りは，スタイルシートだけでなく，スクリプトの力が必要になってくるようです
cf. https://www.imuza.com/entry/2018/04/22/203322
（以前，cssでのうまいやり方を見つけたと思ったのですが，勘違いだったのか，内容を忘れてしまったので，もし思い出したら追記します）

正直，jsについてはあまり詳しくないので，しっかりと説明できそうにないので，背景固定のスクリプトについては一度，上記サイトなどを参考にご自身で実装してもらい，分からないところは再度投稿していただく，という形をおすすめします．

---

ちょっと長めの文章になってしまいました
では，今日はこの辺で切り上げておきます