Skip to content

useIntersectionObserver

检测目标元素的可见性。

¥Detects that a target element's visibility.

示例

Scroll me down!

Hello world!

Element outside the viewport

用法

¥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-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>

交集观察者 MDN

¥IntersectionObserver MDN