@@ -72,7 +72,7 @@ type ScrollProps = {
7272 /**
7373 * The target represents the scrollable element to check for scroll detection.
7474 */
75- target ?: HTMLDivElement ;
75+ target ?: HTMLDivElement | Window ;
7676 /**
7777 * The thr represents the threshold value for scroll detection.
7878 */
@@ -151,14 +151,15 @@ function useDetectScroll(props: ScrollProps = {}): ScrollInfo {
151151
152152 /** Function to update scroll direction */
153153 const updateScrollDir = useCallback ( ( ) => {
154- const scroll =
155- target instanceof Window
156- ? axis === Axis . Y
157- ? window . scrollY
158- : window . scrollX
159- : axis === Axis . Y
160- ? target . scrollTop
161- : target . scrollLeft ;
154+ let scroll : number ;
155+ if ( target instanceof Window ) {
156+ scroll = axis === Axis . Y ? target . scrollY : target . scrollX ;
157+ } else {
158+ scroll =
159+ axis === Axis . Y
160+ ? ( target as HTMLDivElement ) . scrollTop
161+ : ( target as HTMLDivElement ) . scrollLeft ;
162+ }
162163
163164 if ( Math . abs ( scroll - lastScroll . current ) >= threshold ) {
164165 setScrollDir ( scroll > lastScroll . current ? scrollDown : scrollUp ) ;
@@ -170,44 +171,50 @@ function useDetectScroll(props: ScrollProps = {}): ScrollInfo {
170171 useEffect ( ( ) => {
171172 /** Function to update scroll position */
172173 const updateScrollPosition = ( ) => {
173- const top = target instanceof Window ? target . scrollY : target . scrollTop ;
174+ const top =
175+ target instanceof Window
176+ ? target . scrollY
177+ : ( target as HTMLDivElement ) . scrollTop ;
174178 const left =
175- target instanceof Window ? target . scrollX : target . scrollLeft ;
176- const bottom =
177179 target instanceof Window
178- ? document . documentElement . scrollHeight - window . innerHeight - top
179- : document . documentElement . scrollHeight - target . scrollHeight - top ;
180+ ? target . scrollX
181+ : ( target as HTMLDivElement ) . scrollLeft ;
182+ const bottom =
183+ document . documentElement . scrollHeight -
184+ ( target instanceof Window
185+ ? target . innerHeight
186+ : ( target as HTMLDivElement ) . scrollHeight ) -
187+ top ;
180188 const right =
181- target instanceof Window
182- ? document . documentElement . scrollWidth - window . innerWidth - left
183- : document . documentElement . scrollHeight - target . scrollWidth - left ;
189+ document . documentElement . scrollWidth -
190+ ( target instanceof Window
191+ ? target . innerWidth
192+ : ( target as HTMLDivElement ) . scrollWidth ) -
193+ left ;
184194
185195 setScrollPosition ( { top, bottom, left, right } ) ;
186196 } ;
187197
188198 /** Call the update function when the component mounts */
189199 updateScrollPosition ( ) ;
190200
191- target instanceof Window
192- ? window . addEventListener ( 'scroll' , updateScrollPosition )
193- : target . addEventListener ( 'scroll' , updateScrollPosition ) ;
201+ const targetElement = target as EventTarget ;
202+ targetElement . addEventListener ( 'scroll' , updateScrollPosition ) ;
194203
195204 return ( ) => {
196- target instanceof Window
197- ? window . removeEventListener ( 'scroll' , updateScrollPosition )
198- : target . removeEventListener ( 'scroll' , updateScrollPosition ) ;
205+ targetElement . removeEventListener ( 'scroll' , updateScrollPosition ) ;
199206 } ;
200207 } , [ target ] ) ;
201208
202209 useEffect ( ( ) => {
203- lastScroll . current =
204- target instanceof Window
205- ? axis === Axis . Y
206- ? window . scrollY
207- : window . scrollX
208- : axis === Axis . Y
209- ? target . scrollTop
210- : target . scrollLeft ;
210+ if ( target instanceof Window ) {
211+ lastScroll . current = axis === Axis . Y ? target . scrollY : target . scrollX ;
212+ } else {
213+ lastScroll . current =
214+ axis === Axis . Y
215+ ? ( target as HTMLDivElement ) . scrollTop
216+ : ( target as HTMLDivElement ) . scrollLeft ;
217+ }
211218
212219 /** Function to handle onScroll event */
213220 const onScroll = ( ) => {
@@ -217,14 +224,10 @@ function useDetectScroll(props: ScrollProps = {}): ScrollInfo {
217224 }
218225 } ;
219226
220- target instanceof Window
221- ? window . addEventListener ( 'scroll' , onScroll )
222- : target . addEventListener ( 'scroll' , onScroll ) ;
227+ const targetElement = target as EventTarget ;
228+ targetElement . addEventListener ( 'scroll' , onScroll ) ;
223229
224- return ( ) =>
225- target instanceof Window
226- ? window . removeEventListener ( 'scroll' , onScroll )
227- : target . removeEventListener ( 'scroll' , onScroll ) ;
230+ return ( ) => targetElement . removeEventListener ( 'scroll' , onScroll ) ;
228231 } , [ target , axis , updateScrollDir ] ) ;
229232
230233 return { scrollDir, scrollPosition } ;
0 commit comments