Namespace: Viewport

Viewport

Source:

Members

(protected, static) SimplePollingObserver

A very simple polling-based implementation of the IntersectionObserver interface to replace a missing native implementation for the VisibilityObserver. This is not a polyfill, and it lacks a lot of implementation depth, since it is tailored towards interoperability with VisibilityObserver.

At its core, this implementation replaces real intersection events with stupid, brute-force, throttled polling of all observed element's bounding boxes in respect to the viewport box.

Be aware, that this is a very CPU/GPU intensive way of doing things and that using an IntersectionObserver is much preferred. Only use this, if you have to support browsers like IE11 and you cannot leave out scroll animations there. Also try to keep the number of observed elements to a minimum in that cases.

Source:
Example
new SimplePollingObserver(entries => { ... , {targetFps : 60}});

(protected, static) VisibilityState

A class to manage the visibility of an element in respect to the viewport. A VisibilityState contains information such as if the element is currently (fully) inside the viewport and if so, how many pixels are currently visible. There's a whole bunch of information to be found here, that aims to allow for flexible usage in scenarios that require visibility-based effects.

Source:
Example
(new VisibilityState(teaserElement, true)).visiblePixels(42);

Type Definitions

ViewportInfo

Type:
  • Object
Properties:
Name Type Description
scrollTop Number

scroll distance of the window/document in pixels to the upper bound of the viewport
scrollDirection String

either "down" or "up", depending on the last scroll movement
fuzzyScrollDirection String

either "down" or "up", depending on the last scroll movement; the user needs to scroll at least a small distance in the opposite direction for this to change, minimal changes will not change this
width Number

inner width of the window/viewport
height Number

inner height of the window/viewport
bounds Object

the viewport bound rectangle

Properties
Name Type Description
top Number

upper bound of the viewport (typically 0)
right Number

right edge of the viewport (typically equals width)
bottom Number

bottom edge of the viewport (typically equals height)
left Number

left bound of the viewport (typically 0)
width Number

inner width of the window/viewport
height Number

inner height of the window/viewport
Source: