useInViewport

观察元素是否在可见区域，以及元素可见比例。更多信息参考 Intersection Observer API。

代码演示

基础用法

scroll here

observer dom

inViewport: hidden

基本用法监听元素是否在可见区域内

<template>
  <div>
    <div style="width: 100%;height: 300px;overflow: scroll; border: 1px solid;">
      scroll here
      <div style="height: 800px">
        <div
          ref="domRef"
          style="border: 1px solid;height: 100px;width: 100px;text-align: center;margin-top: 80px;"
        >
          observer dom
        </div>
      </div>
    </div>
    <div :style="{ marginTop: 16, color: inViewport ? '#87d068' : '#f50' }">
      inViewport: {{ inViewport ? 'visible' : 'hidden' }}
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useInViewport } from 'vue-hooks-plus'

  const domRef = ref(null)
  const [inViewport] = useInViewport(domRef)
</script>

<template>
  <div>
    <div style="width: 100%;height: 300px;overflow: scroll; border: 1px solid;">
      scroll here
      <div style="height: 800px">
        <div
          ref="domRef"
          style="border: 1px solid;height: 100px;width: 100px;text-align: center;margin-top: 80px;"
        >
          observer dom
        </div>
      </div>
    </div>
    <div :style="{ marginTop: 16, color: inViewport ? '#87d068' : '#f50' }">
      inViewport: {{ inViewport ? 'visible' : 'hidden' }}
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useInViewport } from 'vue-hooks-plus'

  const domRef = ref(null)
  const [inViewport] = useInViewport(domRef)
</script>

监听元素可见区域比例

scroll here

observer dom

inViewport: hidden

ratio: 0

监听元素可见区域比例传入 options.threshold, 可以控制在可见区域达到该比例时触发 ratio 更新。options.root 可以控制相对父级元素，在这个例子中，不会相对浏览器视窗变化。

<template>
  <div>
    <div style="width: 100%;height: 300px;overflow: scroll;border: 1px solid;">
      scroll here
      <div style="height: 800px">
        <div
          ref="domRef"
          style="border: 1px solid;height: 100px;width: 100px;text-align: center;margin-top: 80px;"
        >
          observer dom
        </div>
      </div>
    </div>
    <div :style="{ marginTop: 16, color: inViewport ? '#87d068' : '#f50' }">
      <p>inViewport: {{ inViewport ? 'visible' : 'hidden' }}</p>
      <p>ratio: {{ ratio }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useInViewport } from 'vue-hooks-plus'

  const domRef = ref(null)
  const [inViewport, ratio] = useInViewport(domRef, {
    threshold: [0, 0.25, 0.5, 0.75, 1],
    root: () => document.getElementById('container'),
  })
</script>

<template>
  <div>
    <div style="width: 100%;height: 300px;overflow: scroll;border: 1px solid;">
      scroll here
      <div style="height: 800px">
        <div
          ref="domRef"
          style="border: 1px solid;height: 100px;width: 100px;text-align: center;margin-top: 80px;"
        >
          observer dom
        </div>
      </div>
    </div>
    <div :style="{ marginTop: 16, color: inViewport ? '#87d068' : '#f50' }">
      <p>inViewport: {{ inViewport ? 'visible' : 'hidden' }}</p>
      <p>ratio: {{ ratio }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useInViewport } from 'vue-hooks-plus'

  const domRef = ref(null)
  const [inViewport, ratio] = useInViewport(domRef, {
    threshold: [0, 0.25, 0.5, 0.75, 1],
    root: () => document.getElementById('container'),
  })
</script>

API

const [inViewport, ratio] = useInViewport(
  target,
  options?: Options
);

const [inViewport, ratio] = useInViewport(
  target,
  options?: Options
);

Params

参数	说明	类型	默认值
target	DOM 节点或者 ref	`Element` \| `() => Element` \| `MutableRefObject<Element>`	-
options	设置	`Options`	-

Options

更多信息参考 Intersection Observer API

参数	说明	类型	默认值
threshold	可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 ratio 会被更新	`number` \| `number[]`	-
rootMargin	根(root)元素的外边距	`string`	-
root	指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素，如果未指定或者为 null，则默认为浏览器视窗。	`Element` \| `Document` \| `() => (Element/Document)` \| `MutableRefObject<Element>`	-

Result

参数	说明	类型
inViewport	是否可见	`Readonly<Ref<boolean>>` \| `undefined`
ratio	当前可见比例，在每次到达 `options.threshold` 设置节点时更新	`Readonly<Ref<number>>` \| `undefined`

Source

源码 • 文档 • 示例

useInViewport #

代码演示 #

基础用法 #

监听元素可见区域比例 #

API #

Params #

Options #

Result #

Source #