useIntersectionObserver

分类

元素

导出大小

638 B

上次更改

8 个月前

检测目标元素的可见性。

演示

源码演练场 (beta)

启用

向下滚动我！

你好，世界！

元素在视口外

用法

vue

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

const target
 = useTemplateRef
<HTMLDivElement>('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>

指令用法

此函数还通过 @vueuse/components 包提供了一个指令版本。了解更多用法。

vue

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

const root
 = useTemplateRef
<HTMLDivElement>('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-observ
er="onIntersectionObserver
">
      <p
>Hello world!</p
>
    </div
>
  </div
>

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

IntersectionObserver MDN

类型声明

显示类型声明

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.cn/useIntersectionObserver
 * @param target
 * @param callback
 * @param options
 */
export declare function useIntersectionObserver
(
  target
:
    | MaybeComputedElementRef

    | MaybeRefOrGetter
<MaybeElement
[]>
    | MaybeComputedElementRef
[],
  callback
: IntersectionObserverCallback,
  options
?: UseIntersectionObserverOptions,
): UseIntersectionObserverReturn