back

Viewport observer

The viewport observer is used to observe DOM Elements visibility inside the viewport, using IntersectionObserver.

Usage

const myElement = document.getElement('#my-element')
luge.viewportobserver.add(myElement)

myElement.addEventListener('viewportintersect', (e) => {
  // Can be either 'under', 'above' or 'in'
  console.log(e.target.luge.viewport.position)
})

Property

Observed elements get the following property:

  • luge.viewport.position:  a string containing the element position in comparison to the viewport. The element can be under, in or above the viewport.

Events

The scroll observer emits CustomEvent that can be catched with theaddEventListener method on observed elements.

  • viewportintersect : emitted when the element gets in or out the viewport.
  • viewportin : emitted when the element gets in the viewport.
  • viewportout : emitted when the element gets out of the viewport.
  • viewportabove : emitted when the element gets out of the viewport from top.
  • viewportunder : emitted when the element gets out of the viewport from bottom.

Methods

add(element)

Add an element to the observer.

Parameter Type Description
element HTMLElement DOM element to observe.

remove(element)

Remove an element from the observer.

Parameter Type Description
element HTMLElement DOM element to remove.