stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useIntersectionObserver.md

category

category
Elements

useIntersectionObserver

Detects that a target element's visibility.

Usage

<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core';
import { shallowRef, useTemplateRef } from 'vue';

const target = useTemplateRef('target');
const targetIsVisible = shallowRef(false);

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

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

Directive Usage

<script setup lang="ts">
import { vIntersectionObserver } from '@vueuse/components';
import { shallowRef, useTemplateRef } from 'vue';

const root = useTemplateRef('root');

const isVisible = shallowRef(false);

function onIntersectionObserver([entry]: IntersectionObserverEntry[]) {
  isVisible.value = entry?.isIntersecting || false;
}
</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

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 | Document;
  /**
   * 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.
   * @default 0
   */
  threshold?: number | number[];
}
export interface UseIntersectionObserverReturn extends Pausable {
  isSupported: ComputedRef<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;