Props

Static Props

Static properties are set during initialization and cannot be modified later.

hasOut

• Type: boolean
• Default: true
• Determines whether elements leaving the viewport should trigger an event.
• See demo

const observer = new InView({
  hasOut: true
});

maxInitialDelay

• Type: number
• Default: 1000
• Sets the maximum delay (in milliseconds) for initial element visibility detection. The delay is calculated based on the element's position.
• See demo

const observer = new InView({
  maxInitialDelay: 1000
});

scrollDirection

• Type: 'horizontal' | 'vertical'
• Default: 'vertical'
• Defines the primary scrolling axis used for delay calculations.
• See demo

const observer = new InView({
  scrollDirection: 'horizontal'
});

Mutable Props

Mutable properties can be updated at runtime using .updateProps().

enabled

• Type: boolean
• Default: true
• Enables or disables the IntersectionObserver instance.
• See demo

const observer = new InView({
  enabled: false
});

// change value
observer.updateProps({
  enabled: true
});

rootMargin

• Type: string
• Default: '0% 0% -5% 0%'
• Specifies the root margin offsets for the IntersectionObserver, allowing fine-tuned visibility detection.
• Read more about rootMargin

const observer = new InView({
  rootMargin: '0% 0% -5% 0%'
});

// change value
observer.updateProps({
  rootMargin: '0% 0% -15% 0%'
});