0
0

More than 3 years have passed since last update.

iOS Safariのoverflow:scroll内の要素でtransitionendが発生すると、バウンススクロールがキャンセルされる

Posted at

iOSのOverflow:hiddenを持った要素内スクロールで問題が発生。
iOS safariでは、スクロールが末端でバウンスするエフェクト(ぼよよーんって感じの表現)がかかる。つまり一時的にスクロール可能最大量以上のスクロールがされた状態がユーザーに見える。
ところで、要素内でtransitionendイベントが発生すると、このバウンスが一時的にキャンセルされるのか、スクロール可能量以上のスクロール状態ではなくなる。

結果として、連続的にtransitionendが発生するような演出を入れていた場合(スクロール要素内の要素が次々とスライドインするような演出)、
バウンススクロールが連続的に強制的にスクロール可能最大量にリセットされ、震えているように見える。

効果的な対処法はちょっと思いつかない。
スライドインする要素が全部出現終わるまでは、javaScriptで強制的にバウンススクロール時のスクロールイベントをキャンセルするなどした。ただこれも十全ではない。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0