Determine If Element Is Either Above Or Below Fold Of Page

I have some pages that have multiple input boxes that users can enter text into. Some of these are required to fill in before they click the 'next' button. I have validation errors

Solution 1:

You can use this function: Jsfiddle

function isElementInViewport (el) {
    var rect = el[0].getBoundingClientRect();
    return (rect.top>-1 && rect.bottom <= $(window).height());
}

originally posted Here

New api which you can use in just 11 extra steps lol https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility

Solution 2:

Create and Element in your html that you want to track. e.g

<div #elementToTrack ></div> 

In your component.ts

    @ViewChild("elementToTrack") el: ElementRef;    


    @HostListener("window:scroll", ["$event"])
      onWindowScroll() {
        if (this.el.nativeElement.getBoundingClientRect().bottom == window.innerHeight) {
//do your thing
        }
      }