開発中のスマホページにハンバーガーナビゲーション(ヘッダー右上によくある三本線でタップしたら展開されるパーツ)を設置しようとしているのですが、
一旦オープンにしたハンバーガーナビゲーションをクローズさせるとメインカラムのスクロールが滑らかでなくカクついてしまい困っています。ページ読み込み直後は正しく滑らかにスクロールされるのでオープン処理の際にbildしたtouchmove.scrollContentsがクローズ処理の際に、正しく解除されていないのが原因なのか、、と考え調べつついろいろ試してみたのですが少しいじるとスクロールすら反応されなくなりどうしようもない状況です...
以下怪しい箇所の抜粋です。
function _open() {
status = Status.OPEN;
$(settings.menu + ", " + settings.main_contents).addClass(’js-slidemenu-open’);
$(settings.menu_contents).show();
$("html, body").css("overflow-x", "hidden");
$("html").bind("touchmove.scrollContents", function() {
event.preventDefault();
});
event.preventDefault();
};
function _close() {
status = Status.IN_PROGRESS;
$(settings.menu + ", " + settings.main_contents).removeClass(’js-slidemenu-open’);
$("html").unbind("touchmove.scrollContents");
event.preventDefault();
};
使用しているプラグインはjSlideMenuになります。
(github.com/ukitaka/jSlideMenu)
iPhone5sからChrome, Safariで動作確認しておりますがどちらもスクロールがカクついてしまう状況です。
javascriptにお詳しい方ご教授いただけますと大変嬉しいです。
よろしくお願いします...
みんなの回答 3 件
iPhoneなんてダサいの使ってるから。。。
使ってないのでしたら、アニメーションにtransform使うと早くなりますよ。
CSSでやろうよこういうのは
関連するトピックス