Pablo Pablo - 9 months ago 24
AngularJS Question

Is there an automatic way to detect when a html element (tag) is on screen?

Imagine you want to optimize the resource loading process on a web page made of a lot of carrousels-like view, and long scrollable contents rich on images anda media resources.

I am implementing a Netflix-like gallery using angular (AngularJs, not Angular 2). I have my custom directive (in angular you should use the directive method to declare custom elements, and properties), it works fine, but now I want to use a technic similar to virtual repeaters en angular material or views adapters on Android.

I could detect what I have on screen using code to calculate position and elements, but I would really like a more direct approach. Like an event listener or some thing. Some thing I can use en a general way.

Answer Source

Theres no way to do that with listener. All You can do is to use Element.getBoundingClientRect()

It is going to return You distance to top, bottom, left and right of Your viewport (viewport is what user actually sees). It is worth to mention that You can use it just on elements which are already in DOM, also - unfortunately it affects performance.