Skip to content

useWindowScroll

Category
Export Size
2.24 kB
Last Changed
10 months ago

Reactive window scroll

Demo

See scroll values in the lower right corner of the screen.
Scroll value
x: 0
y: 0

Usage

vue
<script setup lang="ts">
import { 
useWindowScroll
} from '@vueuse/core'
const {
x
,
y
} =
useWindowScroll
()
</script> <template> <
div
>
read current x, y scroll: {{
x
}}, {{
y
}}
</
div
>
<
button
@
click
="
x
= 100">
scroll X to 100 </
button
>
<
button
@
click
="
y
= 100">
scroll Y to 100 </
button
>
</template>

Type Declarations

ts
export interface UseWindowScrollOptions
  extends ConfigurableWindow,
    UseScrollOptions {}
/**
 * Reactive window scroll.
 *
 * @see https://vueuse.org/useWindowScroll
 * @param options
 */
export declare function 
useWindowScroll
(
options
?: UseWindowScrollOptions): {
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
UseWindowScrollReturn
=
ReturnType
<typeof
useWindowScroll
>

Source

SourceDemoDocs

Contributors

Anthony Fu
Anthony Fu
Nurettin Kaya
Antério Vieira
青椒肉丝
Robin
Chen
Jelf
webfansplz
Maik Kowol
Shinigami
Alex Kozack

Changelog

v12.3.0 on
a033e - feat: use useScroll under the hood (#4424)
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.6.0 on
931b2 - feat: allow rewriting back to scroll (#3500)

Released under the MIT License.

Turn AI into a coding partner
Claim 40% off for AIDD Masterclass.
Get discount