VueUse

Scroll me down!

Hello world!

Element outside the viewport

useIntersectionObserver

Detects that a target element's visibility.

Usage

<div ref="target">
  <h1>Hello world</h1>
</div>

import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )

    return {
      target,
      targetIsVisible,
    }
  },
}

IntersectionObserver MDN

Type Declarations

export interface IntersectionObserverOptions extends ConfigurableWindow {
  /**
   * The Element or Document whose bounds are used as the bounding box when testing for intersection.
   */
  root?: MaybeRef<Element | null | undefined>
  /**
   * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
   */
  rootMargin?: string
  /**
   * Either a single number or an array of numbers between 0.0 and 1.
   */
  threshold?: number | number[]
}
/**
 * Detects that a target element's visibility.
 *
 * @see   {@link /useIntersectionObserver}
 * @param target
 * @param callback
 * @param options
 */
export declare function useIntersectionObserver(
  target: MaybeRef<Element | null | undefined>,
  callback: IntersectionObserverCallback,
  options?: IntersectionObserverOptions
): {
  isSupported: boolean | undefined
  stop: () => void
}

Source

Source • Demo • Docs