Scroll observer

The scroll observer is used to observe DOM Elements visibility and progress within the viewport during scroll.

Usage

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

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

myElement.addEventListener('scrollprogress', (e) => {
  // Varies from 0.0 to 1.0
  console.log(e.target.scrollProgress)
})

Properties

Observed elements get two properties:

• viewportPosition:  a string containing the element position in comparison to the viewport. The element can be under, in or above the viewport.
• scrollProgress: an integer containing the element position within the viewport. It varies from 0 when the element is under the viewport (lower in the page) to 1  when the element is above the viewport (higher in the page).

Events

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

• viewportintersect : emitted when the element gets in or out the viewport.
• scrollprogress : emitted during scroll, only when the element is inside the viewport.

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.