質問: スマホのハンバーガーメニューで恐らくメジャーだと思われる Drawer.jsとiScroll.jsを使った横からニュッっと出て、メニューの縦スクロールも滑らかな素敵なメニューなのですが、 ここ数日か、長くても1ケ月以内に、突然動きがおかしくなってしまいました。 以前に製作していて問題なく動いていたサイトの分も全部同じ不具合が出ています。 不具合の内容というと、 ヨコからニュルっとメニューが出るのは問題ないのですが、 メニュ内で縦にスクロールさせて、下のほうのメニューへ行こうとしても、 メニュー内で縦スクロールできず、 メニュー内で指でスワイプしてちょっと動かすと メニューが元にもどって消えてしまいます。 そして、以前は背景は止まっていて、 ヨコから出てきたメニューないでスクロールできていたのに、 現在の不具合の状態では、メニュー内でスクロールしているのに、 背景の方がスクロールしてしまいます。 自分が以前作ったサイト全部が同じ状況になっています。 そして、他の人のDrawerのデモやサンプルを見ても同じような状況を見て取れます。 iscrollの部分がなんかおかしくなっているように思いますが、 原因がわかりません。 cdnから読み込んでいたものを、直接サーバーに置いて読み込むようにしてもダメ、 ↓ここに似たような事で解決したとありましたが、 メニュー達 で囲むだけで解決と書いてありましたが、情報が少なすぎて 自分は解決しませんでした。 おおもとのサイトも同じようにうまく動いていないようです。 http://git.blivesta.com/drawer/ こまりました。。
回答: 同じ問題に直面し、解決できたので記事書きました。 Chromeの最近の変更でpassiveはデフォルトでtrueであり、preventDefaultが実行されない仕様になったようです。つまり背景スクロールやメニューが閉じちゃう動作をキャンセルしてくれないから今回の問題がおきている模様。 addEventListenerではpassiveはtrueとしてaddされているはずなので、passiveをfalseにしてpreventDefaultが実行されるようにしてやらねばならなかったです。