Skip to content

useWindowScroll ​

Category
Export Size
555 B
Last Changed
last week

Reactive window scroll

Demo ​

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

Usage ​

js
import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()
console.log(x.value) // read current x scroll value
y.value = 100 // scroll y to 100

Type Declarations ​

typescript
export interface UseWindowScrollOptions extends ConfigurableWindow {
  behavior?: ScrollBehavior
}
/**
 * Reactive window scroll.
 *
 * @see https://vueuse.org/useWindowScroll
 * @param options
 */
export declare function useWindowScroll(options?: UseWindowScrollOptions): {
  x: Ref<number, number>
  y: Ref<number, number>
}
export type UseWindowScrollReturn = ReturnType<typeof useWindowScroll>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Nurettin Kaya
Antério Vieira
Anthony Fu
Chen
Jelf
webfansplz
Maik Kowol
Shinigami
Alex Kozack

Changelog ​

v12.0.0-beta.1 on 11/21/2024
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.6.0 on 11/9/2023
931b2 - feat: allow rewriting back to scroll (#3500)
v9.13.0 on 2/18/2023
e490a - fix: use scrollX instead of pageXOffset (#2776)
v9.7.0 on 12/16/2022
5df0a - fix: use configured window onScroll (#2545)

Released under the MIT License.