【JavaScript】position:fixed;対応済!sp-slidemenu.jsで気になっていた箇所を勝手に直した

ドロワーメニューとかハンバーガーメニューとかスライドメニューとか言われているアレなUIありますよね。それをJavaScriptで再現しているjQueryプラグインやライブラリは沢山あるのですが、動きが悪かったり満足できるものが意外と少なかったんです。そんな中で一番いいなと思ったのが「sp-slidemenu.js」。詳細については本家をご参照下さい。

ただこちらのライブラリ、こちらのコミット以降に細かい不具合が増えてしまったまま、更新自体が数年前に止まっているようでした。とっても素敵なのに勿体ない!!!ということで自分のほうで可能な限り修正してみました。とはいえ結構突貫なので参考程度にして頂ければ幸いです。修正の詳細はdevelopブランチのコミットログに。

【GitHub】https://github.com/tokunagakazuya/sp-slidemenu
【DEMO】http://tokunagakazuya.github.io/sp-slidemenu/sample/demo1.html

「position:fixed;」対応済!!

一番の目玉はコレです。公式のコメントにも書かれてましたが動作が安定していなかったので無理矢理対応しました。要は「#main」と同じアニメーションをheaderなどposition:fixed;したい要素にも適用させただけですが…。mainを複数設定する形にしたので、一応は互換性もあると思います。ソースを見てもらえれば意図は伝わるはず!

【DEMO】http://tokunagakazuya.github.io/sp-slidemenu/sample/demo5.html

気になる不具合はなんとなく直しました。

見落としてる部分や機種依存など多いと思いますが、目立つものは一旦完了。

Android 2.3のフォーカス時に変な所にスクロールしちゃう問題

Android 2.3.6端末でフォームがあるページでinputにフォーカスが入ると、ページ上部や下部へスクロールしてしまいます。

みたいな不具合が多かったようなので、以下を参考に修正。

結論として168行目disable3dの値を false から true に変更したら直りました。(恐らくスライドアニメーションの挙動にtransform3Dをつかうかどうか、だと思うのですが、JS詳しい方読解お願いします)
http://be-hase.com/javascript/428/#comment-91219

Passive Event Listener に対応

新しいブラウザだとウィンドウ側もスクロールしてしまい、不安定だったので修正。

README.mdの通りに書いてるのに 「Element not found. Please set correctly」 というエラーが

そもそもREADME.mdが古かったようで、仕様が変わってから修正がされていなかったみたいです。あとオプションの指定もできなくなっていたので直しておきました。