Skip to content

useElementVisibility

跟踪视口中元素的可见性。

¥Tracks the visibility of an element within the viewport.

示例

Info on the right bottom corner
Target Element (scroll down)
Element outside the viewport

用法

¥Usage

vue
<script setup lang="ts">
import { 
useElementVisibility
} from '@vueuse/core'
import {
useTemplateRef
} from 'vue'
const
target
=
useTemplateRef
<HTMLDivElement>('target')
const
targetIsVisible
=
useElementVisibility
(
target
)
</script> <template> <
div
ref
="
target
">
<
h1
>Hello world</
h1
>
</
div
>
</template>

rootMargin

如果你希望在元素完全可见之前尽早触发回调,则可以使用 rootMargin 选项(参见 MDN IntersectionObserver/rootMargin)。

¥If you wish to trigger your callback sooner before the element is fully visible, you can use the rootMargin option (See MDN IntersectionObserver/rootMargin).

ts
const 
targetIsVisible
=
useElementVisibility
(target, {
rootMargin
: '0px 0px 100px 0px',
})

threshold

如果你想控制更新值所需的可见性百分比,可以使用 threshold 选项(参见 MDN IntersectionObserver/threshold)。

¥If you want to control the percentage of the visibility required to update the value, you can use the threshold option (See MDN IntersectionObserver/threshold).

ts
const 
targetIsVisible
= useElementVisibility(target, {
threshold
: 1.0, // 100% visible
})

组件用法

¥Component Usage

vue
<template>
  <UseElementVisibility v-slot="{ 
isVisible
}">
Is Visible: {{
isVisible
}}
</UseElementVisibility> </template>

指令用法

¥Directive Usage

vue
<script setup lang="ts">
import { 
vElementVisibility
} from '@vueuse/components'
import {
shallowRef
,
useTemplateRef
} from 'vue'
const
target
=
useTemplateRef
<HTMLDivElement>('target')
const
isVisible
=
shallowRef
(false)
function
onElementVisibility
(
state
) {
isVisible
.
value
=
state
} </script> <template> <
div
v-element-visibili
ty="
onElementVisibility
">
{{
isVisible
? 'inside' : 'outside' }}
</
div
>
<!-- with options --> <
div
ref
="
target
">
<
div
v-element-visibili
ty="
[
onElementVisibility
, {
scrollTarget
:
target
}]
">
{{
isVisible
? 'inside' : 'outside' }}
</
div
>
</
div
>
</template>