Skip to content

useIntersectionObserver

Category
Export Size
634 B
Last Changed
5 months ago

Detects that a target element's visibility.

Demo

Scroll me down!

Hello world!

Element outside the viewport

Usage

html
<div ref="target">
  <h1>Hello world</h1>
</div>
<div ref="target">
  <h1>Hello world</h1>
</div>
js
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )

    return {
      target,
      targetIsVisible,
    }
  },
}
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )

    return {
      target,
      targetIsVisible,
    }
  },
}

Directive Usage

This function also provides a directive version via the @vueuse/components package. Learn more about the usage.

html
<script setup lang="ts">
import { ref } from 'vue'
import { vIntersectionObserver } from '@vueuse/components'

const root = ref(null)

const isVisible = ref(false)

function onIntersectionObserver([{ isIntersecting }]) {
  isVisible.value = isIntersecting
}

</script>

<template>
  <div>
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="onIntersectionObserver">
      <p>Hello world!</p>
    </div>
  </div>

  <!-- with options -->
  <div ref="root">
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="[onIntersectionObserver, { root }]">
      <p>Hello world!</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { vIntersectionObserver } from '@vueuse/components'

const root = ref(null)

const isVisible = ref(false)

function onIntersectionObserver([{ isIntersecting }]) {
  isVisible.value = isIntersecting
}

</script>

<template>
  <div>
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="onIntersectionObserver">
      <p>Hello world!</p>
    </div>
  </div>

  <!-- with options -->
  <div ref="root">
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="[onIntersectionObserver, { root }]">
      <p>Hello world!</p>
    </div>
  </div>
</template>

IntersectionObserver MDN

Source

SourceDemoDocs

Contributors

Anthony Fu
Jelf
webfansplz
schelmo
Fernando Fernández
Alex Liu
Curt Grimes
Waleed Khaled
丶远方
Hassan Zahirnia
karma
Shinigami
Alex Kozack
Jacob Clevenger
Antério Vieira
Evgeniy Gavrilov
听风吟丶

Changelog

v10.0.2 on 4/14/2023
7d001 - fix: module reference, close #2972
v10.0.1 on 4/14/2023
b95b6 - fix: targets length check (#2968)
v10.0.0 on 4/14/2023
f87f8 - feat: allow multiple targets (#2964)
v10.0.0-beta.4 on 4/13/2023
4b336 - feat: support for Pausable interface (#2883)
v10.0.0-beta.2 on 3/28/2023
74b00 - fix(useElementVisibility)!: use useIntersectionObserver instead of scroll event handler (#2551)
v8.9.3 on 7/14/2022
fc03c - fix!: rename type IntersectionObserverOptions to UseIntersectionObserverOptions (#1870)
v8.9.2 on 7/12/2022
81d92 - fix(all)!: isSupported becomes Ref instead of boolean for SSR compatibility (#1800)

Released under the MIT License.