読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

ページスクロール中のJSの動きを調べてまとめました(iPhone6 iOS 9.2.1 にて確認)

一昔前はページスクロール中はJSが止まってしまうことがあたりまえだったiOSのブラウザ。
なのでスクロール連動のサイトとかを実装するときはいろいろ大変でした。(自前でスクロールを実装したりしてました)
しかし、最近のSafariはスクロール中にもJSが動くようになり一安心。だと思っていたのですが、ふと他のブラウザやアプリ内のWebViewでの挙動が不安になり調べてみることにしました。

検証方法

スクロール中にsetIntervalが動くか確認
  1. こちらのコード をブラウザで開く
  2. ページをスクロールしながら観察する(タイマーによって数字がカウントアップしていくことを期待)
スクロール中にscrollTopが更新されるか確認
  1. こちらのコード をブラウザで開く
  2. ページをスクロールしながら観察する(リアルタイムにスクロール量が更新されることを期待)
  3. ついでにscrollTopに負の値が入るのかのも確認

検証結果

Safari

スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!


Chrome(47.0.2526.107)

Chrome - Google のウェブブラウザ

Chrome - Google のウェブブラウザ

  • Google, Inc.
  • ユーティリティ
  • 無料

スクロール中にsetIntervalが => 動かない...
スクロール中にscrollTopが => 更新されない...
scrollTopに負の値が => はいらない(0以下の数は0になる模様)

【追記】
48.0.2564.87にてスクロール中にもJSが評価されるようになったようです。
kimizuka.hatenablog.com


Firefox

Firefox Web ブラウザ

Firefox Web ブラウザ

  • Mozilla
  • ユーティリティ
  • 無料

スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!


Twitter

Twitter

Twitter

  • Twitter, Inc.
  • ソーシャルネットワーキング
  • 無料

スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!


Facebook

Facebook

Facebook

  • Facebook, Inc.
  • ソーシャルネットワーキング
  • 無料

スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!


Messenger

Messenger

Messenger

  • Facebook, Inc.
  • ソーシャルネットワーキング
  • 無料

スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!


LINE

LINE

LINE

  • LINE Corporation
  • ソーシャルネットワーキング
  • 無料

スクロール中にsetIntervalが => 動く!
スクロール中にscrollTopが => 更新される!
scrollTopに負の値が => はいる!



現状ではChromeだけスクロール中にJSが止まってしまう模様です。
アップデートに期待しましょう。

【追記】
48.0.2564.87にてスクロール中にもJSが評価されるようになったようです。
kimizuka.hatenablog.com