みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

ページスクロール中の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)

Google Chrome - ウェブブラウザ

Google Chrome - ウェブブラウザ

  • Google LLC
  • ユーティリティ
  • 無料

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

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


Firefox

Firefox ウェブブラウザー

Firefox ウェブブラウザー

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

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


Twitter

Twitter ツイッター

Twitter ツイッター

  • Twitter, Inc.
  • ニュース
  • 無料

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


Facebook

Facebook

Facebook

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

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


Messenger

Messenger

Messenger

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

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


LINE

LINE

LINE

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

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



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

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