MoreHook

Appearance

Return to top
On this page

useScrollPosition

获取scroll 的Y轴滚动量 (可指定元素)

Demo

source

我是内容，请滑动我，除了我你还可以滑动外层查看效果

document body scrollY: -1

div scrollY: -1

Usage

html
<template>
  <div>
    <div
      ref="divRef"
      style="border: 1px solid red; height: 300px; overflow: auto"
    >
      <div style="height: 900px; background-color: yellowgreen"></div>
    </div>
    <p>document body scrollY: {{ scrollY }}</p>
    <p>div scrollY: {{ divScrollY }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useScrollPosition } from '@morehook/core'

const { scrollY } = useScrollPosition()

const divRef = ref()
const { scrollY: divScrollY } = useScrollPosition({ target: divRef })
</script>

Type Declarations

typescript
/**
 * target: 需要获取滚动量的元素 (默认 )
 */
interface Options {
  target?: HTMLElement | Ref<HTMLElement>
}
/**
 * 获取scroll 的Y轴滚动量
 * 分为全局触发和某个元素触发
 * @param options Options
 * @return scrollY: 当更改此值时会直接滚动到目标区域
 */
export declare function useScrollPosition(options?: Options): {
  scrollY: Ref<number>
}

Source

Source • Demo • Docs