Replies: 1 comment
-
Instead of using For example, to use <script setup lang="ts">
import { ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';
const watchedElement = ref();
const targetIsVisible = ref(false);
useIntersectionObserver(
watchedElement,
([{ isIntersecting }]) => {
// Run this callback whenever watchedElement
// intersects the viewport boundary
targetIsVisible.value = isIntersecting;
},
{
// The entire element must become visible in
// the viewport to trigger an intersection
threshold: 1,
}
);
</script>
<template>
<div class="message">
Scroll down to make element appear. The watched element
<strong>{{ targetIsVisible ? 'IS' : 'IS NOT' }}</strong> completely visible
in the viewport.
</div>
<div ref="watchedElement" class="watchedElement">This is the element</div>
</template> Demo: https://stackblitz.com/edit/vitejs-vite-cyjfwh?file=src%2FApp.vue&terminal=dev As a bonus, this is likely more performant than using |
Beta Was this translation helpful? Give feedback.
-
The
useElementVisibility
detects if any part of an element is visible in the viewport. however, a closely related query would be if the element is completely visible in the view port? is there an easy way to implement that using vueuse?Beta Was this translation helpful? Give feedback.
All reactions