I've seen solutions for how to detect if a specific element is in a viewport, but I would like to know out of all elements what elements are currently in the viewport? I could loop through all DOM elements and perform checks of the bounding rect, but is there a more efficient way of doing this?
What I am trying to achieve is to save a user's reading progress throughout the page and save it, then use this information to scroll to that element using scrollIntoView() next time the user opens the same page. I've tried a different approach before by saving and scrolling to the depth percentage, however this is not accurate in responsive design where the viewport size needs to change
I think you can use intersection observer API (for angular, you can use @ng-web-apis/intersection-observer). Read more about intersection observer API
and handle the event when block in view
<section waIntersectionRoot>
<div
waIntersectionObserver
waIntersectionThreshold="0.5"
(waIntersectionObservee)="onIntersection($event)"
>
I'm being observed
</div>
<div
waIntersectionObserver
waIntersectionThreshold="1,0.5,0"
(waIntersectionObservee)="onIntersection($event)"
>
I'm being observed
</div>
</section>
ts file
onIntersection(event) {
// code here
}
I would agree that using IntersectionObserver would be simplest. Here I use it as a directive and attach observer to html <div> elements.
The Intersection Observer API allows you to configure a callback that is called when either of these circumstances occur: A target element intersects either the device's viewport or a specified element. That specified element is called the root element or root for the purposes of the Intersection Observer API. The first time the observer is initially asked to watch a target element. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_concepts_and_usage
private _callback = (entries, observer) => {
entries.forEach(entry => {
console.log(entry.isIntersecting ? this.elementName + 'I am visible' : this.elementName + 'I am not visible');
this.visibilityChange.emit(entry.isIntersecting ? 'VISIBLE' : 'HIDDEN')
});
};
<div enterTheViewportNotifier elementName="TOP ELEMENT" style="height: 100px; background-color: yellow">
I'll notify when I'm visible TOP ELEMENT
</div>
<div enterTheViewportNotifier elementName="BOTTOM ELEMENT" style="height: 100px; background-color: blue">
I'll notify when I'm visible BOTTOM ELEMENT
</div>
However, regarding the part where user returns and continues reading where he left off I would suggest state manager like NGRX to handle that if you plan to save user state in more places. If not and it is just for this one time I would save scrollHeight in a service. And when user returns to the component, then we simply take last known scrollHeight and scroll user to the last scrollHeight
Here is a working example: https://stackblitz.com/edit/angular-ivy-3mkabk?file=src%2Fapp%2Fenter-the-view-port.directive.ts