Add bottom margin to preemptively trigger didEnterViewport.įor IntersectionObserver, this property interpolates to rootMargin.įor rAF, this property will use bottom tolerance and measure against the height of the container to determine when to trigger didEnterViewport.Īlso, if your sentinel (the watched element) is a zero-height element, ensure that the sentinel actually is able to enter the viewport. This option determines how accurately the Component needs to be within the viewport for it to be considered as entered. Depending on your use case, the default of false may be acceptable.ĭefault: However, for browsers (Safari < 12.1) that don't currently support IntersectionObserver, we fallback to rAF.

NOTE: If using IntersectionObserver (default), viewportSpy wont put too much of a tax on your application. This reduces the load on the Ember run loop and your application.

When false, the intersection observer will only watch the Component until it enters the viewport once, and then it unbinds listeners. Because this is expensive, this behaviour is opt-in. When true, the library will continually watch the Component and re-fire hooks whenever it enters or leaves the viewport. If you support IE11 and detect and run logic onExit, then it is necessary to have this true to that the requestAnimationFrame watching your sentinel is not torn down. ViewportSpy: false is often useful for one time loading of artwork, metrics, etc when the come into the viewport. ViewportSpy: true is often useful when you have 'infinite lists' that need to keep loading more data.

If your intersectionThreshold is set to 0 you will get notified if the target didEnterViewport and didExitViewport at the appropriate time.Ī CSS selector for the scrollable area.

When set to just 1.0, when the element is 99% visible and still has isIntersecting as true, when the element leaves the viewport, the element isn't applicable to the observer anymore, so the callback isn't called again.

To get around the above issue and have didExitViewport fire, set your intersectionThreshold to.

See last comment here: for purpose of isIntersecting

If intersectionThreshold is set to anything greater than 0, you will not see didExitViewport hook fired due to our use of the isIntersecting property.

Similarily, this is possible to notify if onscreen when your site loads.

If the target is offscreen, you will get a notification via didExitViewport that the target is initially offscreen.

Similarily, will fire didEnterViewport every 25% of the target that is visible. A value of 1.0 means the entire target must be visible to fire the didEnterViewport hook. A value of 0.0 means the target will be visible when the first pixel enters the viewport. Options as the second argument to inViewport.watchElement include:Ī single number or array of numbers between 0.0 and 1.0. First, inject the service to your component and start 'watching' DOM elements. Installation ember install ember-in-viewport

Use with Ember Modifiers and Use with Native Classes.

Lazy loading responsive images (see dummy-artwork for an example artwork component).

We utilize pooling techniques to reuse Intersection Observers and rAF observers in order to make your app as performant as possible and do as little works as possible. By default, this uses the IntersectionObserver API if it detects it the DOM element is in your user's browser – failing which, it falls back to using requestAnimationFrame, then if not available, the Ember run loop and event listeners. This library will allow you to check if a Component or DOM element has entered the browser's viewport. This Ember addon adds a simple, highly performant Service or modifier to your app. Detect if an Ember View or Component is in the viewport 60FPSĮmber-in-viewport is built and maintained by DockYard, contact us for expert Ember.js consulting.

Ember light table apply class to th