Skip to content

useIntersectionObserver

Category
Export Size
634 B
Last Changed
last year

Detects that a target element's visibility.

Demo

Scroll me down!

Hello world!

Element outside the viewport

Usage

vue
<script setup>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

const target = ref(null)
const targetIsVisible = ref(false)

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

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

Directive Usage

This function also provides a directive version via the @vueuse/components package. Learn more about the usage.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { vIntersectionObserver } from '@vueuse/components'

const root = ref(null)

const isVisible = ref(false)

function onIntersectionObserver([{ isIntersecting }]: IntersectionObserverEntry[]) {
  isVisible.value = isIntersecting
}
</script>

<template>
  <div>
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="onIntersectionObserver">
      <p>Hello world!</p>
    </div>
  </div>

  <!-- with options -->
  <div ref="root">
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="[onIntersectionObserver, { root }]">
      <p>Hello world!</p>
    </div>
  </div>
</template>

IntersectionObserver MDN

Type Declarations

Show Type Declarations
typescript
export interface UseIntersectionObserverOptions extends ConfigurableWindow {
  /**
   * Start the IntersectionObserver immediately on creation
   *
   * @default true
   */
  immediate?: boolean
  /**
   * The Element or Document whose bounds are used as the bounding box when testing for intersection.
   */
  root?: MaybeComputedElementRef
  /**
   * 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[]
}
export interface UseIntersectionObserverReturn extends Pausable {
  isSupported: Ref<boolean>
  stop: () => void
}
/**
 * Detects that a target element's visibility.
 *
 * @see https://vueuse.org/useIntersectionObserver
 * @param target
 * @param callback
 * @param options
 */
export declare function useIntersectionObserver(
  target:
    | MaybeComputedElementRef
    | MaybeRefOrGetter<MaybeElement[]>
    | MaybeComputedElementRef[],
  callback: IntersectionObserverCallback,
  options?: UseIntersectionObserverOptions,
): UseIntersectionObserverReturn

Source

SourceDemoDocs

Contributors

Anthony Fu
Jelf
webfansplz
Sma11X
schelmo
Fernando Fernández
Alex Liu
Curt Grimes
Waleed Khaled
丶远方
Hassan Zahirnia
karma
Shinigami
Alex Kozack
Jacob Clevenger
Antério Vieira
Evgeniy Gavrilov
听风吟丶

Changelog

v10.0.2 on 4/14/2023
7d001 - fix: module reference, close #2972
v10.0.1 on 4/14/2023
b95b6 - fix: targets length check (#2968)
v10.0.0 on 4/14/2023
f87f8 - feat: allow multiple targets (#2964)
v10.0.0-beta.4 on 4/13/2023
4b336 - feat: support for Pausable interface (#2883)
v10.0.0-beta.2 on 3/28/2023
74b00 - fix(useElementVisibility)!: use useIntersectionObserver instead of scroll event handler (#2551)
v8.9.3 on 7/14/2022
fc03c - fix!: rename type IntersectionObserverOptions to UseIntersectionObserverOptions (#1870)

Released under the MIT License.