Doc @hungpvq

Appearance

useIntersectionObserver ​

Package
Share - Core
Category
Description
detects that a target element's visibility

Detects that a target element's visibility.

Demo ​

Scroll me down!

Hello world!

Element outside the viewport

Usage ​

vue
<script setup>
import { ref } from 'vue';
import { useIntersectionObserver } from '@hungpvq/shared-core';

const target = ref(null);
const targetIsVisible = ref(false);

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

<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>

Directive Usage ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { vIntersectionObserver } from '@hungpvq/shared-core';

const root = ref(null);

const isVisible = ref(false);

function onIntersectionObserver([{ isIntersecting }]: IntersectionObserverEntry[]) {
  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