一昔前はページスクロール中はJSが止まってしまうことがあたりまえだったiOSのブラウザ。
なのでスクロール連動のサイトとかを実装するときはいろいろ大変でした。(自前でスクロールを実装したりしてました)
しかし、最近のSafariはスクロール中にもJSが動くようになり一安心。だと思っていたのですが、ふと他のブラウザやアプリ内のWebViewでの挙動が不安になり調べてみることにしました。
検証方法
スクロール中にsetIntervalが動くか確認
- こちらのコード をブラウザで開く
- ページをスクロールしながら観察する(タイマーによって数字がカウントアップしていくことを期待)
スクロール中にscrollTopが更新されるか確認
- こちらのコード をブラウザで開く
- ページをスクロールしながら観察する(リアルタイムにスクロール量が更新されることを期待)
- ついでにscrollTopに負の値が入るのかのも確認
検証結果
Safari
スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!
Chrome(47.0.2526.107)
スクロール中にsetIntervalが => 動かない...
スクロール中にscrollTopが => 更新されない...
scrollTopに負の値が => はいらない(0以下の数は0になる模様)
【追記】
48.0.2564.87にてスクロール中にもJSが評価されるようになったようです。
kimizuka.hatenablog.com
Firefox
スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!
スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!
スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!
Messenger
スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!
LINE
スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!
現状ではChromeだけスクロール中にJSが止まってしまう模様です。
アップデートに期待しましょう。
【追記】
48.0.2564.87にてスクロール中にもJSが評価されるようになったようです。
kimizuka.hatenablog.com