Class InView

InView is a visibility detection utility that leverages the IntersectionObserver API to monitor when elements enter or leave the viewport. It provides customizable options for triggering events, delaying visibility changes, and dynamically adding CSS classes to elements based on their visibility state.

Documentation

Hierarchy (View Summary)

Constructors

Accessors

  • get isDestroyed(): boolean

    Checks if the module has been destroyed.

    Returns boolean

  • get name(): string

    The name of the module, derived from the class name

    Returns string

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

Methods

  • Adds a class name on an element, and keeps track of it for removal when the module is destroyed.

    Parameters

    • element: Element

      The target DOM element.

    • className: string

      The class name to toggle.

    Returns void

  • Helper function to generate classnames with the module's prefix.

    Parameters

    • ...classNames: string[]

      The class names to generate.

    Returns string

    A string of class names with the module's prefix applied.

  • Returns default mutable properties.

    Returns { __mutableProp: true; enabled: boolean; rootMargin: string }

    • __mutableProp: true
    • enabled: boolean

      Enables or disables the IntersectionObserver instance.

      true
      
    • rootMargin: string

      Specifies the root margin offsets for the IntersectionObserver, allowing fine-tuned visibility detection.

      '0% 0% -5% 0%'
      
  • Returns default static properties.

    Returns {
        __staticProp: true;
        hasOut: boolean;
        maxInitialDelay: number;
        scrollDirection: "horizontal" | "vertical";
    }

    • __staticProp: true
    • hasOut: boolean

      Determines whether elements leaving the viewport should trigger an event.

      true
      
    • maxInitialDelay: number

      Sets the maximum delay (in milliseconds) for initial element visibility. Delay is calculated based on element position.

      1000
      
    • scrollDirection: "horizontal" | "vertical"

      Defines the primary scrolling axis used for delay calculations.

      'vertical'
      
  • Registers an element for visibility observation.

    If the element has a data-in-view-class attribute, the specified class will be applied upon entering the viewport.

    Parameters

    • element: Element

    Returns () => void

    A function to stop observing the element.

  • Adds a callback on the module's destruction.

    Parameters

    • action: () => void

      The function to execute during destruction.

    Returns void

  • Removes an element from observation, preventing further visibility tracking.

    Parameters

    • element: Element

    Returns void