pistachiouseIntersectionObserver
The IntersectionObserver.
State
The useIntersectionObserver function exposes the following reactive state:
typescript
import { useIntersectionObserver } from '@elonehoo/pistachio'
const { supported, elements, isIntersecting } = useIntersectionObserver( options )
import { useIntersectionObserver } from '@elonehoo/pistachio'
const { supported, elements, isIntersecting } = useIntersectionObserver( options )
| State | Type | Description |
|---|---|---|
| supported | boolean | Is supported |
| elements | Ref<IntersectionObserverEntry[]> | IntersectionObserverEntry |
| isIntersecting | Ref<boolean> | Returns true if all observed elements are intersection |
Methods
The useIntersectionObserver function exposes the following methods:
typescript
import { useIntersectionObserver } from '@elonehoo/pistachio'
const { observe, unobserve, disconnect, debug } = useIntersectionObserver()
import { useIntersectionObserver } from '@elonehoo/pistachio'
const { observe, unobserve, disconnect, debug } = useIntersectionObserver()
| Signature | Description |
|---|---|
| observe(Element) | Starts observing Element |
| unobserve(Element) | Stops observing Element |
| disconnect() | IntersectionObserver.disconnect |
Example
Visible: false
Scroll down
Hide me
Scroll up
vue
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { useIntersectionObserver } from '@elonehoo/pistachio'
const el = ref(null)
const { isIntersecting } = useIntersectionObserver(el)
</script>
<template>
<div>
Visible: {{ isIntersecting }}
<p>Scroll down</p>
<div style="height:500px" />
<div ref="el" style="background:lightgreen">
Hide me
</div>
<p>Scroll up</p>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { useIntersectionObserver } from '@elonehoo/pistachio'
const el = ref(null)
const { isIntersecting } = useIntersectionObserver(el)
</script>
<template>
<div>
Visible: {{ isIntersecting }}
<p>Scroll down</p>
<div style="height:500px" />
<div ref="el" style="background:lightgreen">
Hide me
</div>
<p>Scroll up</p>
</div>
</template>