useScroll
响应式的滚动位置和状态。
示例
用法
<script setup lang="ts">
import { useScroll } from '@vueuse/core'
import { useTemplateRef } from 'vue'
const el = useTemplateRef<HTMLElement>('el')
const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
</script>
<template>
<div ref="el" />
</template>
带偏移量
const { x, y, isScrolling, arrivedState, directions } = useScroll(el, {
offset: { top: 30, bottom: 30, right: 30, left: 30 },
})
设置滚动位置
设置 x
和 y
的值以使元素滚动到该位置。
<script setup lang="ts">
import { useScroll } from '@vueuse/core'
import { useTemplateRef } from 'vue'
const el = useTemplateRef<HTMLElement>('el')
const { x, y } = useScroll(el)
</script>
<template>
<div ref="el" />
<button @click="x += 10">
向右滚动 10px
</button>
<button @click="y += 10">
向下滚动 10px
</button>
</template>
平滑滚动
设置 behavior: smooth
以启用平滑滚动。behavior
选项默认为 auto
,表示没有平滑滚动。有关更多信息,请参阅 window.scrollTo()
上的 behavior
选项。
import { useScroll } from '@vueuse/core'
import { useTemplateRef } from 'vue'
const el = useTemplateRef<HTMLElement>('el')
const { x, y } = useScroll(el, { behavior: 'smooth' })
// 或作为 `ref`:
const smooth = ref(false)
const behavior = computed(() => smooth.value ? 'smooth' : 'auto')
const { x, y } = useScroll(el, { behavior })
import { useScroll } from '@vueuse/core'
import { useTemplateRef } from 'vue'
const el = useTemplateRef('el')
const { x, y } = useScroll(el, { behavior: 'smooth' })
// 或作为 `ref`:
const smooth = ref(false)
const behavior = computed(() => (smooth.value ? 'smooth' : 'auto'))
const { x, y } = useScroll(el, { behavior })
Recalculate scroll state
You can call the measure()
method to manually update the scroll position and arrivedState
at any time.
This is useful, for example, after dynamic content changes or when you want to recalculate the scroll state outside of scroll events.
import { useScroll } from '@vueuse/core'
import { nextTick, onMounted, useTemplateRef, watch } from 'vue'
const el = useTemplateRef<HTMLElement>('el')
const reactiveValue = shallowRef(false)
const { measure } = useScroll(el)
// In a watcher
watch(reactiveValue, () => {
measure()
})
// Or inside any function
function updateScrollState() {
// ...some logic
nextTick(() => {
measure()
})
}
import { useScroll } from '@vueuse/core'
import { nextTick, useTemplateRef, watch } from 'vue'
const el = useTemplateRef('el')
const reactiveValue = shallowRef(false)
const { measure } = useScroll(el)
// In a watcher
watch(reactiveValue, () => {
measure()
})
// Or inside any function
function updateScrollState() {
// ...some logic
nextTick(() => {
measure()
})
}
NOTE
it's recommended to call measure()
inside nextTick()
, to ensure the DOM is updated first. The scroll state is initialized automatically onMount
. You only need to call measure()
manually if you want to recalculate the state after some dynamic changes.
重新计算滚动状态
您可以随时调用 measure()
方法手动更新滚动位置和 arrivedState
。
例如,这在动态内容更改后或在您想要在滚动事件之外重新计算滚动状态时非常有用。
import { useScroll } from '@vueuse/core'
import { nextTick, onMounted, useTemplateRef, watch } from 'vue'
const el = useTemplateRef<HTMLElement>('el')
const reactiveValue = shallowRef(false)
const { measure } = useScroll(el)
// In a watcher
watch(reactiveValue, () => {
measure()
})
// Or inside any function
function updateScrollState() {
// ...some logic
nextTick(() => {
measure()
})
}
import { useScroll } from '@vueuse/core'
import { nextTick, useTemplateRef, watch } from 'vue'
const el = useTemplateRef('el')
const reactiveValue = shallowRef(false)
const { measure } = useScroll(el)
// In a watcher
watch(reactiveValue, () => {
measure()
})
// Or inside any function
function updateScrollState() {
// ...some logic
nextTick(() => {
measure()
})
}
NOTE
推荐在 nextTick()
中调用 measure()
,以确保 DOM 首先更新。 滚动状态在 onMount
时自动初始化。 只有在您希望在某些动态变化后重新计算状态时,才需要手动调用 measure()
。
指令用法
<script setup lang="ts">
import type { UseScrollReturn } from '@vueuse/core'
import { vScroll } from '@vueuse/components'
const data = ref([1, 2, 3, 4, 5, 6])
function onScroll(state: UseScrollReturn) {
console.log(state) // {x, y, isScrolling, arrivedState, directions}
}
</script>
<template>
<div v-scroll="onScroll">
<div v-for="item in data" :key="item">
{{ item }}
</div>
</div>
<!-- 带选项 -->
<div v-scroll="[onScroll, { throttle: 10 }]">
<div v-for="item in data" :key="item">
{{ item }}
</div>
</div>
</template>
类型声明
显示类型声明
export interface UseScrollOptions extends ConfigurableWindow {
/**
* Throttle time for scroll event, it’s disabled by default.
*
* @default 0
*/
throttle?: number
/**
* The check time when scrolling ends.
* This configuration will be setting to (throttle + idle) when the `throttle` is configured.
*
* @default 200
*/
idle?: number
/**
* Offset arrived states by x pixels
*
*/
offset?: {
left?: number
right?: number
top?: number
bottom?: number
}
/**
* Use MutationObserver to monitor specific DOM changes,
* such as attribute modifications, child node additions or removals, or subtree changes.
* @default { mutation: boolean }
*/
observe?:
| boolean
| {
mutation?: boolean
}
/**
* Trigger it when scrolling.
*
*/
onScroll?: (e: Event) => void
/**
* Trigger it when scrolling ends.
*
*/
onStop?: (e: Event) => void
/**
* Listener options for scroll event.
*
* @default {capture: false, passive: true}
*/
eventListenerOptions?: boolean | AddEventListenerOptions
/**
* Optionally specify a scroll behavior of `auto` (default, not smooth scrolling) or
* `smooth` (for smooth scrolling) which takes effect when changing the `x` or `y` refs.
*
* @default 'auto'
*/
behavior?: MaybeRefOrGetter<ScrollBehavior>
/**
* On error callback
*
* Default log error to `console.error`
*/
onError?: (error: unknown) => void
}
/**
* Reactive scroll.
*
* @see https://vueuse.org/useScroll
* @param element
* @param options
*/
export declare function useScroll(
element: MaybeRefOrGetter<
HTMLElement | SVGElement | Window | Document | null | undefined
>,
options?: UseScrollOptions,
): {
x: WritableComputedRef<number, number>
y: WritableComputedRef<number, number>
isScrolling: ShallowRef<boolean, boolean>
arrivedState: {
left: boolean
right: boolean
top: boolean
bottom: boolean
}
directions: {
left: boolean
right: boolean
top: boolean
bottom: boolean
}
measure(): void
}
export type UseScrollReturn = ReturnType<typeof useScroll>
源码
贡献者
更新日志
v13.4.0
on v12.8.0
on v12.3.0
on 59f75
- feat(toValue): deprecate toValue
from @vueuse/shared
in favor of Vue's nativev12.1.0
on v10.10.0
on v10.8.0
on v10.6.1
on v10.6.0
on v10.4.0
on v10.3.0
on v10.2.0
on v10.1.1
on a88fe
- fix(useInfiniteScroll): re-measure arrived states when async infinite scroll resolves (#3030)4d757
- feat(types)!: rename MaybeComputedRef
to MaybeRefOrGetter
0a72b
- feat(toValue): rename resolveUnref
to toValue