個人的に辛いと思っていたこと レスポンシブ時で要素のスクロール位置がレイアウトによって変化する場合(SPだとレイアウトが縦長になるため) 感覚的に書けないつらさ 1回のみの動作させるときはflag処理が必須(スクロールさせてfalseにしてfalse時は動作させないなど) スクロールイベントの発生は断続的なのでブラウザでの負荷がヤバい。 setTimeoutとかrequestAnimationFrameとかで軽減させる方法は一応ある ⇛ (関連記事) lazyloadなどの遅延読み込みをネイティブで分かりやすく出来ないか。 Intersection Observer という技術について こちらの記事で「Intersection Observer」というAPIを要素の遅延読み込みに利用していると知り、なんとなく調べてみることにした。 概要 Intersection(交点)Observer(監
![Intersection Observer が良さそうなので試してみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6947d33d913f4ae9ef6d1e1768e585416ac6b811/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9SW50ZXJzZWN0aW9uJTIwT2JzZXJ2ZXIlMjAlRTMlODElOEMlRTglODklQUYlRTMlODElOTUlRTMlODElOUQlRTMlODElODYlRTMlODElQUElRTMlODElQUUlRTMlODElQTclRTglQTklQTYlRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODElOUYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTE4ZTJmNmNkZmEyMjBhMjI4MzMwZWVmZTQwMjVjYTQx%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweWFtYW5va3UmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRjZWZkODBhYzFjZDcyMmQ0YjgxZjE4ZGZiMDNjNTJi%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9cfa926eeb2c0473033e7ce5fe704674)