# IntersectionObserver
# State
The useIntersectionObserver
function exposes the following reactive state:
import { useIntersectionObserver } from "vue-composable";
const { supported, elements, isIntersecting } = useIntersectionObserver(
options
);
State | Type | Description |
---|---|---|
supported | Boolean | Is supported |
elements | Ref<IntersectionObserverEntry[]> | IntersectionObserverEntry (opens new window) |
isIntersecting | Ref<Boolean? | Returns true if all observed elements are intersection |
# Methods
The useIntersectionObserver
function exposes the following methods:
import { useIntersectionObserver } from "vue-composable";
const { observe, unobserve, disconnect, debug } = useIntersectionObserver();
Signature | Description |
---|---|
observe(Element) | Starts observing Element |
unobserve(Element | Stops observing Element |
disconnect() | IntersectionObserver.disconnect (opens new window) |
# Example
Visible: false
Scroll down
Hide me
Scroll up
# Code
<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>
import { ref, watch, reactive } from "@vue/composition-api";
import { useIntersectionObserver } from "vue-composable";
export default {
name: "intersection-observer-example",
setup() {
const el = ref(null);
const o = useIntersectionObserver(el);
return {
...o,
el
};
}
};
</script>