useIntersectionObserver

Demo

启用

向下滚动我！

Hello world!

元素外部视口

使用方法

vue

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

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>

指令使用

vue

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

const root = ref(null)

const isVisible = ref(false)

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

<template>
  <div>
    <p>
      向下滚动！
    </p>
    <div v-intersection-observer="onIntersectionObserver">
      <p>Hello world!</p>
    </div>
  </div>

  <!-- 使用选项 -->
  <div ref="root">
    <p>
      向下滚动！
    </p>
    <div v-intersection-observer="[onIntersectionObserver, { root }]">
      <p>Hello world!</p>
    </div>
  </div>
</template>

IntersectionObserver MDN

类型声明

typescript

export interface UseIntersectionObserverOptions extends ConfigurableWindow {
  /**
   * 在创建时立即启动 IntersectionObserver
   *
   * @default true
   */
  immediate?: boolean
  /**
   * 用作边界框的元素或文档，用于测试相交时使用的边界框。
   */
  root?: MaybeComputedElementRef | Document
  /**
   * 一个字符串，指定计算相交时要添加到根边界框的偏移量集。
   */
  rootMargin?: string
  /**
   * 单个数字或介于 0.0 和 1 之间的数字数组。
   * @default 0
   */
  threshold?: number | number[]
}
export interface UseIntersectionObserverReturn extends Pausable {
  isSupported: Ref<boolean>
  stop: () => void
}
/**
 * 检测目标元素的可见性。
 *
 * @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