Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9004

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

$
0
0

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

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

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


Viewing all articles
Browse latest Browse all 9004

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>