useIntersectionObserver
检测目标元素的可见性。
¥Detects that a target element's visibility.
示例
用法
¥Usage
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>
指令用法
¥Directive Usage
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-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>