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);