2

So that you understand my question right I think I have to dive a bit deeper. I know how to solve this with vanilla Javascript, which will also work in typescript. The only problem is I don't get how to call this function in typescript throughout the app. I can't use a while(true) and I know that Javascript is single-threaded so I guess it is the same with typescript.

How can I implement a checker which checks throughout the runtime if a element is in view?

Laurenz Kaml
  • 31
  • 5
  • Use the Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API – sdgluck Jun 16 '20 at 09:05
  • https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 – StepUp Jun 16 '20 at 09:35

2 Answers2

0

Some more details about the scenario would be helpful. I dont consider this to be typescript specific. Generalizing the problem: If you want to check wheter an element is in view you need to:

  • a) Find all the events where this state may change (instead of the polling approach)
  • b) Determine a method of evaluating 'is in viewport'

On all events of a) run the method b) and communicate the state change to whatever needs to know this. Guessing this is web and DOM based, events would be widow.onload, window.onorientationchange, window.onscroll. 'In veiwport' could be anything between overlapping by a pixel to totally in view. This would be basic math given the elements bounding rectangle and the viewport

BobbyTables
  • 3,498
  • 1
  • 22
  • 28
0

You can use a HostListener on the scroll event

@HostListener("window:scroll", ['$event'])
onWindowScroll(event) {
   //Your code here
}

You can refer to this answer Check if element is partially in viewport for how to check that the element's in viewport

Amineze
  • 156
  • 3
  • 8