sidr.jsを組み込んでリサイズするとスタイルがくずれる

コンテンツ内にも position:fixedが使えるとゆうことで(結局使わなかったが) 組み込んでみたけど、いろいろ困ったのでメモ。

・ページスクロールのアニメの挙動がスマホでカクつく →-webkit-overflow-scrolling: touch;で回避

・サイドメニューを開くとスクロールバーが2つになる(PC閲覧時) →スマホでは出ないので、保留 

・スマホメニューを開いた状態でウィンドウをリサイズすると、スタイルがくずれる場合がある →メニューを開くと内部のステータス、
sidrStatus.moving
sidrStatus.opened
の値が変わる。

用意されているAPI

$.sidr(‘close’, ‘sidr-menu’);

を呼んでも、上のステータスの値が変更されず、 cssのクラスも消去できないため、スタイルがくずれる。

このようなケースの外部関数が用意されてないので close関数内に

sidrStatus.moving = false;
sidrStatus.opened = false;

の処理を追加。 右開きのメニューなら、リサイズイベントでrightの値を元に戻す必要もある。

$(“#sidr-menu”).css(“right”,0);