Skip to content

useElementVisibility

Category
Export Size
1.22 kB
Last Changed
last month

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

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

<script>
import { ref } from 'vue'
import { useElementVisibility } from '@vueuse/core'

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

    return {
      target,
      targetIsVisible,
    }
  }
}
</script>
<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useElementVisibility } from '@vueuse/core'

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

    return {
      target,
      targetIsVisible,
    }
  }
}
</script>

Component Usage

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

<UseElementVisibility v-slot="{ isVisible }">
  Is Visible: {{ isVisible }}
</UseElementVisibility>
<UseElementVisibility v-slot="{ isVisible }">
  Is Visible: {{ isVisible }}
</UseElementVisibility>

Directive Usage

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

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

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>
<script setup lang="ts">
import { ref } from 'vue'
import { vElementVisibility } from '@vueuse/components'

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>

Type Declarations

export interface UseElementVisibilityOptions extends ConfigurableWindow {
  scrollTarget?: MaybeComputedRef<HTMLElement | undefined | null>
}
/**
 * Tracks the visibility of an element within the viewport.
 *
 * @see https://vueuse.org/useElementVisibility
 * @param element
 * @param options
 */
export declare function useElementVisibility(
  element: MaybeComputedElementRef,
  { window, scrollTarget }?: UseElementVisibilityOptions
): Ref<boolean>
export interface UseElementVisibilityOptions extends ConfigurableWindow {
  scrollTarget?: MaybeComputedRef<HTMLElement | undefined | null>
}
/**
 * Tracks the visibility of an element within the viewport.
 *
 * @see https://vueuse.org/useElementVisibility
 * @param element
 * @param options
 */
export declare function useElementVisibility(
  element: MaybeComputedElementRef,
  { window, scrollTarget }?: UseElementVisibilityOptions
): Ref<boolean>

Source

SourceDemoDocs

Contributors

Anthony Fu
Scott Bedard
wheat
Amr Bashir
Jelf
webfansplz
AllenYu
Ary Raditya
Chung, Lian
Carlos Yanes
Alex Kozack

Changelog

v8.9.3 on 7/14/2022
86df7 - fix!: rename type VisibilityScrollTargetOptions to UseElementVisibilityOptions (#1863)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.1.0 on 3/16/2022
be803 - fix: directive should work fine (#1424)
de142 - feat: directive support (#1377)
v6.7.5 on 11/3/2021
b58cc - fix: prop 'as' does not work as expected (#889)
v6.4.0 on 9/17/2021
e557f - feat: added 'as' prop to renderable components (#742)

Released under the MIT License.