@@ -31,6 +31,13 @@ export interface UseMouseOptions extends ConfigurableWindow, ConfigurableEventFi
31
31
*/
32
32
touch ?: boolean
33
33
34
+ /**
35
+ * Listen to `scroll` events on window, only effective on type `page`
36
+ *
37
+ * @default true
38
+ */
39
+ scroll ?: boolean
40
+
34
41
/**
35
42
* Reset to initial value when `touchend` event fired
36
43
*
@@ -69,9 +76,12 @@ export function useMouse(options: UseMouseOptions = {}) {
69
76
initialValue = { x : 0 , y : 0 } ,
70
77
window = defaultWindow ,
71
78
target = window ,
79
+ scroll = true ,
72
80
eventFilter,
73
81
} = options
74
82
83
+ let _prevMouseEvent : MouseEvent | null = null
84
+
75
85
const x = ref ( initialValue . x )
76
86
const y = ref ( initialValue . y )
77
87
const sourceType = ref < UseMouseSourceType > ( null )
@@ -82,6 +92,7 @@ export function useMouse(options: UseMouseOptions = {}) {
82
92
83
93
const mouseHandler = ( event : MouseEvent ) => {
84
94
const result = extractor ( event )
95
+ _prevMouseEvent = event
85
96
86
97
if ( result ) {
87
98
[ x . value , y . value ] = result
@@ -99,6 +110,17 @@ export function useMouse(options: UseMouseOptions = {}) {
99
110
}
100
111
}
101
112
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
+
102
124
const reset = ( ) => {
103
125
x . value = initialValue . x
104
126
y . value = initialValue . y
@@ -112,6 +134,10 @@ export function useMouse(options: UseMouseOptions = {}) {
112
134
? ( event : TouchEvent ) => eventFilter ( ( ) => touchHandler ( event ) , { } as any )
113
135
: ( event : TouchEvent ) => touchHandler ( event )
114
136
137
+ const scrollHandlerWrapper = eventFilter
138
+ ? ( ) => eventFilter ( ( ) => scrollHandler ( ) , { } as any )
139
+ : ( ) => scrollHandler ( )
140
+
115
141
if ( target ) {
116
142
const listenerOptions = { passive : true }
117
143
useEventListener ( target , [ 'mousemove' , 'dragover' ] , mouseHandlerWrapper , listenerOptions )
@@ -120,6 +146,8 @@ export function useMouse(options: UseMouseOptions = {}) {
120
146
if ( resetOnTouchEnds )
121
147
useEventListener ( target , 'touchend' , reset , listenerOptions )
122
148
}
149
+ if ( scroll && type === 'page' )
150
+ useEventListener ( window , 'scroll' , scrollHandlerWrapper , { passive : true } )
123
151
}
124
152
125
153
return {
0 commit comments