fix: 修复scrollIntoView的参数behavior设置为smooth时引导面板定位异常的问题 #50509

docs/examples/scrollIntoView.tsx

@@ -32,7 +32,7 @@ const App = () => {
         >
           Create
         </button>
-        <div style={{ height: 1000 }} />
+        <div style={{ height: 1500 }} />
         <button className="ant-target" ref={updateBtnRef}>
           Update
         </button>
@@ -65,7 +65,7 @@ const App = () => {
             ),
             target: () => updateBtnRef.current,
             scrollIntoViewOptions: {
-              block: 'start'
+              block: 'start', behavior:'smooth'
             }
           },
           {

src/hooks/useTarget.ts

@@ -2,7 +2,7 @@ import useEvent from 'rc-util/lib/hooks/useEvent';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import { useMemo, useState } from 'react';
 import type { TourStepInfo } from '..';
-import { isInViewPort } from '../util';
+import { isInViewPort,debounce } from '../util';
 
 export interface Gap {
   offset?: number | [number, number];
@@ -44,8 +44,8 @@ export default function useTarget(
       // Exist target element. We should scroll and get target position
       if (!isInViewPort(targetElement) && open) {
         targetElement.scrollIntoView(scrollIntoViewOptions);
+        return;
       }
-
       const { left, top, width, height } =
         targetElement.getBoundingClientRect();
       const nextPosInfo: PosInfo = { left, top, width, height, radius: 0 };
@@ -62,15 +62,32 @@ export default function useTarget(
     }
   });
 
+
+  let ticking = false;
+  const debounceUpdatePos = debounce(updatePos,1000/60+0.1);
+  const scrollUpdatePos = window.requestAnimationFrame ? ()=>{
+    if (!ticking) {
+      window.requestAnimationFrame(() => {
+        debounceUpdatePos();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  }: debounce(updatePos,1000/60*3)
+
+
   const getGapOffset = (index: number) =>
     (Array.isArray(gap?.offset) ? gap?.offset[index] : gap?.offset) ?? 6;
 
   useLayoutEffect(() => {
     updatePos();
     // update when window resize
     window.addEventListener('resize', updatePos);
+    // update when window scroll stop
+    window.addEventListener('scroll',scrollUpdatePos)
     return () => {
       window.removeEventListener('resize', updatePos);
+      window.removeEventListener('scroll', scrollUpdatePos);
     };
   }, [targetElement, open, updatePos]);
 

src/util.ts

@@ -18,3 +18,16 @@ export function getPlacement(
     stepPlacement ?? placement ?? (targetElement === null ? 'center' : 'bottom')
   );
 }
+
+export function debounce<T extends (...args: any[]) => any>(func: T, wait: number): T {
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    const debouncedFunc = (...args: Parameters<T>): void => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            func(...args);
+        }, wait);
+    };
+
+    return debouncedFunc as T;
+}