# IntersectionObserver

The IntersectionObserver (opens new window).

# State

The useIntersectionObserver function exposes the following reactive state:

import { useIntersectionObserver } from "vue-composable";

const { supported, elements, isIntersecting } = useIntersectionObserver(
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

    Visible: {{ isIntersecting }}

    <p>Scroll down</p>
    <div style="height:500px" />

    <div ref="el" style="background:lightgreen">
      Hide me

    <p>Scroll up</p>

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 {