useElementVisibility

Package

Share - Core

Category

Elements

Description

tracks the visibility of an element within the viewport

Tracks the visibility of an element within the viewport.

Demo

Info on the right bottom corner

Target Element (scroll down)

Element outside the viewport

Usage

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

const target = ref(null);
const targetIsVisible = useElementVisibility(target);
</script>

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

Directive Usage

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

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

function onElementVisibility(state) {
  isVisible.value = state;
}
</script>

<template>
  <div v-element-visibility="onElementVisibility">
    {{ isVisible ? 'inside' : 'outside' }}
  </div>

  <!-- with options -->
  <div ref="target">
    <div v-element-visibility="[onElementVisibility, { scrollTarget: target }]">
      {{ isVisible ? 'inside' : 'outside' }}
    </div>
  </div>
</template>