8000 fix(useMouse): position won't be changed on page scroll when `type` i… · vueuse/vueuse@c2f641d · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit c2f641d

Browse files
CatsJuiceantfu
andauthored
fix(useMouse): position won't be changed on page scroll when type is page, closes #2922 (#3244)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
1 parent 1903fb5 commit c2f641d

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

packages/core/useMouse/index.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,13 @@ export interface UseMouseOptions extends ConfigurableWindow, ConfigurableEventFi
3131
*/
3232
touch?: boolean
3333

34+
/**
35+
* Listen to `scroll` events on window, only effective on type `page`
36+
*
37+
* @default true
38+
*/
39+
scroll?: boolean
40+
3441
/**
3542
* Reset to initial value when `touchend` event fired
3643
*
@@ -69,9 +76,12 @@ export function useMouse(options: UseMouseOptions = {}) {
6976
initialValue = { x: 0, y: 0 },
7077
window = defaultWindow,
7178
target = window,
79+
scroll = true,
7280
eventFilter,
7381
} = options
7482

83+
let _prevMouseEvent: MouseEvent | null = null
84+
7585
const x = ref(initialValue.x)
7686
const y = ref(initialValue.y)
7787
const sourceType = ref<UseMouseSourceType>(null)
@@ -82,6 +92,7 @@ export function useMouse(options: UseMouseOptions = {}) {
8292

8393
const mouseHandler = (event: MouseEvent) => {
8494
const result = extractor(event)
95+
_prevMouseEvent = event
8596

8697
if (result) {
8798
[x.value, y.value] = result
@@ -99,6 +110,17 @@ export function useMouse(options: UseMouseOptions = {}) {
99110
}
100111
}
101112

113+
const scrollHandler = () => {
114+
if (!_prevMouseEvent || !window)
115+
return
116+
const pos = extractor(_prevMouseEvent)
117+
118+
if (_prevMouseEvent instanceof MouseEvent && pos) {
119+
x.value = pos[0] + window.scrollX
120+
y.value = pos[1] + window.scrollY
121+
}
122+
}
123+
102124
const reset = () => {
103125
x.value = initialValue.x
104126
y.value = initialValue.y
@@ -112,6 +134,10 @@ export function useMouse(options: UseMouseOptions = {}) {
112134
? (event: TouchEvent) => eventFilter(() => touchHandler(event), {} as any)
113135
: (event: TouchEvent) => touchHandler(event)
114136

137+
const scrollHandlerWrapper = eventFilter
138+
? () => eventFilter(() => scrollHandler(), {} as any)
139+
: () => scrollHandler()
140+
115141
if (target) {
116142
const listenerOptions = { passive: true }
117143
useEventListener(target, ['mousemove', 'dragover'], mouseHandlerWrapper, listenerOptions)
@@ -120,6 +146,8 @@ export function useMouse(options: UseMouseOptions = {}) {
120146
if (resetOnTouchEnds)
121147
useEventListener(target, 'touchend', reset, listenerOptions)
122148
}
149+
if (scroll && type === 'page')
150+
useEventListener(window, 'scroll', scrollHandlerWrapper, { passive: true })
123151
}
124152

125153
return {

0 commit comments

Comments
 (0)
0