Re-implement using IntersectionObserver
See original GitHub issueIt seems like IntersectionObserver
might be a good way to handle this on platforms that support it.
Here’s a post outlining how they work: https://developers.google.com/web/updates/2016/04/intersectionobserver
Issue Analytics
- State:
- Created 6 years ago
- Reactions:14
- Comments:7
Top Results From Across the Web
Easily implement Infinite Scrolling using Intersection Observer ...
Easy way to do it (using IntersectionObserver ). Using IntersectionObserver we can observe any target element for its intersection with another ...
Read more >Lazy loading using the Intersection Observer API
Lazy loading is a technique that allows us to delay loading nonessential content in our application until after the initial page load.
Read more >How to Implement Infinite Scrolling with Intersection Observer ...
How to Implement. We will implement infinite scrolling in two steps: Generate a list with JavaScript. Load more with Intersection Observer API.
Read more >How To Defer, Lazy-Load And Act With IntersectionObserver
Simply put, IntersectionObserver asynchronously observes overlapping of one element by another element.
Read more >How to implement Intersection Observer API in Angular?
Creating an intersection observer · root - element that is used as the viewport for checking the visibility of the target. · rootMargin...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
See this example that illustrates the problem with IntersectionObserver in the above case.
I’ve also opened an issue with the W3C to consider this case in the spec, so perhaps something will come of that.
One other thing that might be effected by this implementation is “rapidScroll”. With intersection observer, we no longer have scroll position, just if it is entering or leaving. I guess if you have fireOnRapidScroll set to true, the component will have no choice but to install a scroll listener. But perhaps it could have a more aggressive throttle on it. Thoughts?