useIntersectionObserver
Detects changes to a target element's visibility.
Package: @vueuse/core
Category: Elements
Usage
<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'
import { shallowRef, useTemplateRef } from 'vue'
const target = useTemplateRef('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>Options
| Option | Type | Default | Description |
|---|---|---|---|
| immediate | boolean |
true | Start the IntersectionObserver immediately on creation |
| root | MaybeComputedElementRef | Document |
- | The Element or Document whose bounds are used as the bounding box when testing for intersection. |
| rootMargin | MaybeRefOrGetter<string> |
- | A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections. |
| threshold | number | number[] |
0 | Either a single number or an array of numbers between 0.0 and 1. |
Returns
| Name | Type |
|---|---|
| isSupported | useSupported |
| isActive | shallowRef |