question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Re-implement using IntersectionObserver

See original GitHub issue

It 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:open
  • Created 6 years ago
  • Reactions:14
  • Comments:7

github_iconTop GitHub Comments

4reactions
patrick-mcdouglecommented, Oct 2, 2017

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.

2reactions
patrick-mcdouglecommented, Oct 2, 2017

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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found