From 296c8e245f182f77848256951a06090b1c7d55a4 Mon Sep 17 00:00:00 2001 From: linxianxi <904492381@qq.com> Date: Wed, 26 Jun 2024 11:25:23 +0800 Subject: [PATCH] fix: resolve passive warning --- src/List.tsx | 6 +++--- src/ScrollBar.tsx | 12 ++++++------ src/hooks/useMobileTouchMove.ts | 6 +++--- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/List.tsx b/src/List.tsx index 6a5c751..ad8ff80 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -432,9 +432,9 @@ export function RawList(props: ListProps, ref: React.Ref) { } const componentEle = componentRef.current; - componentEle.addEventListener('wheel', onRawWheel); - componentEle.addEventListener('DOMMouseScroll', onFireFoxScroll as any); - componentEle.addEventListener('MozMousePixelScroll', onMozMousePixelScroll); + componentEle.addEventListener('wheel', onRawWheel, { passive: false }); + componentEle.addEventListener('DOMMouseScroll', onFireFoxScroll as any, { passive: true }); + componentEle.addEventListener('MozMousePixelScroll', onMozMousePixelScroll, { passive: false }); return () => { componentEle.removeEventListener('wheel', onRawWheel); diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index d8f90a7..862d00d 100644 --- a/src/ScrollBar.tsx +++ b/src/ScrollBar.tsx @@ -115,8 +115,8 @@ const ScrollBar = React.forwardRef((props, ref) => const scrollbarEle = scrollbarRef.current; const thumbEle = thumbRef.current; - scrollbarEle.addEventListener('touchstart', onScrollbarTouchStart); - thumbEle.addEventListener('touchstart', onThumbMouseDown); + scrollbarEle.addEventListener('touchstart', onScrollbarTouchStart, { passive: false }); + thumbEle.addEventListener('touchstart', onThumbMouseDown, { passive: false }); return () => { scrollbarEle.removeEventListener('touchstart', onScrollbarTouchStart); @@ -176,10 +176,10 @@ const ScrollBar = React.forwardRef((props, ref) => onStopMove(); }; - window.addEventListener('mousemove', onMouseMove); - window.addEventListener('touchmove', onMouseMove); - window.addEventListener('mouseup', onMouseUp); - window.addEventListener('touchend', onMouseUp); + window.addEventListener('mousemove', onMouseMove, { passive: true }); + window.addEventListener('touchmove', onMouseMove, { passive: true }); + window.addEventListener('mouseup', onMouseUp, { passive: true }); + window.addEventListener('touchend', onMouseUp, { passive: true }); return () => { window.removeEventListener('mousemove', onMouseMove); diff --git a/src/hooks/useMobileTouchMove.ts b/src/hooks/useMobileTouchMove.ts index d563eb2..17740e9 100644 --- a/src/hooks/useMobileTouchMove.ts +++ b/src/hooks/useMobileTouchMove.ts @@ -68,8 +68,8 @@ export default function useMobileTouchMove( touchYRef.current = Math.ceil(e.touches[0].pageY); elementRef.current = e.target as HTMLElement; - elementRef.current.addEventListener('touchmove', onTouchMove); - elementRef.current.addEventListener('touchend', onTouchEnd); + elementRef.current.addEventListener('touchmove', onTouchMove, { passive: false }); + elementRef.current.addEventListener('touchend', onTouchEnd, { passive: true }); } }; @@ -82,7 +82,7 @@ export default function useMobileTouchMove( useLayoutEffect(() => { if (inVirtual) { - listRef.current.addEventListener('touchstart', onTouchStart); + listRef.current.addEventListener('touchstart', onTouchStart, { passive: true }); } return () => {