iOS ブラウザのスクロールイベント

背景

github page で プロフィールサイト作ったのに ios のスクロールイベントがおかしい!

touchmove イベント

スマホのスクロールは慣性スクロールがあるので scroll イベントではとぎれとぎれになる

スマホのタッチイベントは ｢押した時｣ ｢動かした時｣ ｢離した時｣ と段階毎に用意されているらしい

スクロールだけに限定すれば touchmove イベントが ｢動かした時｣ なので, 連続してイベントが発生してくれる.

//...
window.addEventListener('scroll', this.handleScroll.bind(this));
window.addEventListener('touchmove', this.handleScroll.bind(this));
//...

のように両方用意しておくことでスマホでもPCでも同じようにイベントが発生する.

window.outerHeight

スクロールとは直接関係無いのだけれど, iOS のブラウザだと window.outerHeight と window.outerWidth が 0 になってしまうバグ(?) があるらしいので注意すべき