'How can I detect what elements are currently in a viewport?

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

javascripthtmlangulartypescript


Solution 1:[1]

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
}

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 helloworld
Solution 2

Related Questions