Reactで無限スクロールを実現するものにreact-infinite-scroll-componentというシンプルなコンポーネントがあります。
Github: ankeetmaini/react-infinite-scroll-component
とてもシンプルで使いやすいのですが、
- 親要素の高さが十分でないと機能しない
-
<InfiniteScroll>のなかにコンテンツ以外の枠などが含まれているとうまく動作しない
などのデメリットもあります。
そして今日ぶつかったバグは、画像のようにiOSのSafariにおいてうまくスクロールできない症状です。
ちょっと分かりづらいですが、最初のタッチで引っかかる感じです。
##解決した方法
以下のスクリプトをhtmlに追加しました。
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('.infinite-scroll-component ').removeAttribute('style')
});
</script>
問題は、クラスinfinite-scroll-component が-webkit-overflow-scrolling: touch;というスタイルを持っているから起きているようでした。なので、style属性丸ごと削除しています。
githubにissue投げろよという感じですが、とりあえず自分用のメモと、同じバグで悩む日本人を救えればという思いです。