Viewport Module Examples

In the upper right corner you should see specific information if certain elements further below currently are in the viewport or not. Additionally, we differentiate between the element being fully in the viewport or at least partly.

If your pages work with breakpoints and you need programmatic information, apart from anything happening in CSS, about the state of the viewport in comparison to your breakpoints and notifications if the breakpoint changes, you can use this observer class, which fully manages a list of breakpoints, gives you access to the current state and offers notifications on change.

If you have a look at the panel, you can see the current viewport information for this page.

If the boolean information of isInViewport() is not enough for your purposes and you need precise, scrolling- and thereby visibility-based information, you could use a VisibilityObserver to track element's visibility states on the page. Using this you could implement lazy loading, enter-effects and all kinds of scrolly-telling.

If you have a look at the panel, you can see precise information for all elements, that have been added to the observer and if you have a close look at the elements while scrolling, you can also spot some events and effects taking place, which are based on information provided by the observer.

If you click on the buttons below, you should programmatically scroll down, to several elements below. The end points of the scroll should differ in position relative to the element, speed and the fact that you can or cannot cancel the ongoing scroll by scrolling yourself with your mouse or touch.