From 01ca31b4e72c78f3b7e40bbd58161e47f966258b Mon Sep 17 00:00:00 2001
From: ryan-ziqi <877520264@qq.com>
Date: Sat, 8 Mar 2025 23:43:51 +0800
Subject: [PATCH 1/3] fix: panel not follow when scroll is visible

---
 src/hooks/useTarget.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts
index 840cbf3..10d4c11 100644
--- a/src/hooks/useTarget.ts
+++ b/src/hooks/useTarget.ts
@@ -85,8 +85,12 @@ export default function useTarget(
     updatePos();
     // update when window resize
     window.addEventListener('resize', updatePos);
+    // update when `document.body.style.overflow` is set to visible
+    // by default, it will be set to hidden
+    window.addEventListener('scroll', updatePos);
     return () => {
       window.removeEventListener('resize', updatePos);
+      window.removeEventListener('scroll', updatePos);
     };
   }, [targetElement, open, updatePos]);
 

From 19cf2fc7a4d43851d71a6e649f873f8ebd50caf4 Mon Sep 17 00:00:00 2001
From: yellworyan <877520264@qq.com>
Date: Tue, 11 Mar 2025 21:33:52 +0800
Subject: [PATCH 2/3] test: add scroll test case

---
 tests/index.test.tsx | 66 +++++++++++++++++++++++++++++++++++++++++++-
 tests/utils.ts       |  8 +++++-
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 0dffea0..6f27163 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -7,7 +7,7 @@ import type { TourProps } from '../src/index';
 import Tour from '../src/index';
 import { getPlacements, placements } from '../src/placements';
 import { getPlacement } from '../src/util';
-import { resizeWindow } from './utils';
+import { resizeWindow, scrollWindow } from './utils';
 
 const mockBtnRect = (
   rect: {
@@ -1225,4 +1225,68 @@ describe('Tour', () => {
     // Check container has children
     expect(children).toBeTruthy();
   });
+
+  it('should update position when window scroll', async () => {
+    mockBtnRect({
+      x: 80,
+      y: 333,
+      width: 230,
+      height: 180,
+    });
+    const Demo = () => {
+      const btnRef = useRef<HTMLButtonElement>(null);
+
+      return (
+        <div style={{ width: '100%' }}>
+          <button
+            className="btn2"
+            ref={btnRef}
+            onClick={() => {
+              mockBtnRect({
+                x: 80,
+                y: 800,
+                width: 230,
+                height: 180,
+              });
+              scrollWindow(0, 800);
+            }}
+          >
+            按钮
+          </button>
+          <Tour
+            open
+            placement={'bottom'}
+            steps={[
+              {
+                title: '创建',
+                description: '创建一条数据',
+                target: () => btnRef.current,
+              },
+            ]}
+          />
+        </div>
+      );
+    };
+    const { baseElement, unmount } = render(<Demo />);
+    expect(
+      baseElement.querySelector('.rc-tour-target-placeholder'),
+    ).toHaveStyle('left: 74px; top: 327px; width: 242px; height: 192px;');
+    fireEvent.click(baseElement.querySelector('.btn2'));
+    await act(() => {
+      jest.runAllTimers();
+    });
+    expect(
+      baseElement.querySelector('.rc-tour-target-placeholder'),
+    ).toHaveStyle('left: 74px; top: 794px; width: 242px; height: 192px;');
+
+    expect(baseElement).toMatchSnapshot();
+
+    unmount();
+    mockBtnRect({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    });
+  });
 });
diff --git a/tests/utils.ts b/tests/utils.ts
index 523b7e9..fb3bc6b 100644
--- a/tests/utils.ts
+++ b/tests/utils.ts
@@ -4,4 +4,10 @@ export const resizeWindow = (x: number, y: number) => {
     // @ts-ignore
     window.innerHeight = y;
     window.dispatchEvent(new Event('resize'));
-};
\ No newline at end of file
+};
+
+
+export const scrollWindow = (x: number, y: number) => {
+    window.scrollTo(x, y);
+    window.dispatchEvent(new Event('scroll'))
+}
\ No newline at end of file

From 7e99bd2e28b24a806aa730fbd05decbee38b7b83 Mon Sep 17 00:00:00 2001
From: yellworyan <877520264@qq.com>
Date: Tue, 11 Mar 2025 21:34:03 +0800
Subject: [PATCH 3/3] chore: update snapshot

---
 tests/__snapshots__/index.test.tsx.snap | 155 ++++++++++++++++++++++++
 1 file changed, 155 insertions(+)

diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index 281c083..f4c6b02 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -1280,6 +1280,161 @@ exports[`Tour should update position when window resize 1`] = `
 </body>
 `;
 
+exports[`Tour should update position when window scroll 1`] = `
+<body>
+  <div>
+    <div
+      style="width: 100%;"
+    >
+      <button
+        class="btn2"
+      >
+        按钮
+      </button>
+    </div>
+  </div>
+  <div>
+    <div
+      class="rc-tour-mask"
+      style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1001; pointer-events: none;"
+    >
+      <svg
+        style="width: 100%; height: 100%;"
+      >
+        <defs>
+          <mask
+            id="rc-tour-mask-test-id"
+          >
+            <rect
+              fill="white"
+              height="100vh"
+              width="100vw"
+              x="0"
+              y="0"
+            />
+            <rect
+              class=""
+              fill="black"
+              height="192"
+              rx="2"
+              width="242"
+              x="74"
+              y="794"
+            />
+          </mask>
+        </defs>
+        <rect
+          fill="rgba(0,0,0,0.5)"
+          height="100%"
+          mask="url(#rc-tour-mask-test-id)"
+          width="100%"
+          x="0"
+          y="0"
+        />
+        <rect
+          fill="transparent"
+          height="794"
+          pointer-events="auto"
+          width="100%"
+          x="0"
+          y="0"
+        />
+        <rect
+          fill="transparent"
+          height="100%"
+          pointer-events="auto"
+          width="74"
+          x="0"
+          y="0"
+        />
+        <rect
+          fill="transparent"
+          height="calc(100% - 986px)"
+          pointer-events="auto"
+          width="100%"
+          x="0"
+          y="986"
+        />
+        <rect
+          fill="transparent"
+          height="100%"
+          pointer-events="auto"
+          width="calc(100% - 316px)"
+          x="316"
+          y="0"
+        />
+      </svg>
+    </div>
+  </div>
+  <div>
+    <div
+      class="rc-tour-target-placeholder"
+      style="left: 74px; top: 794px; width: 242px; height: 192px; position: fixed; pointer-events: none;"
+    />
+  </div>
+  <div>
+    <div
+      class="rc-tour rc-tour-placement-bottom"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+    >
+      <div
+        class="rc-tour-arrow"
+        style="position: absolute;"
+      />
+      <div
+        class="rc-tour-pannel"
+      >
+        <div
+          class="rc-tour-section"
+        >
+          <button
+            aria-label="Close"
+            class="rc-tour-close"
+            type="button"
+          >
+            <span
+              class="rc-tour-close-x"
+            >
+              ×
+            </span>
+          </button>
+          <div
+            class="rc-tour-header"
+          >
+            <div
+              class="rc-tour-title"
+            >
+              创建
+            </div>
+          </div>
+          <div
+            class="rc-tour-description"
+          >
+            创建一条数据
+          </div>
+          <div
+            class="rc-tour-footer"
+          >
+            <div
+              class="rc-tour-sliders"
+            />
+            <div
+              class="rc-tour-actions"
+            >
+              <button
+                class="rc-tour-finish-btn"
+              >
+                Finish
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`Tour showArrow should show tooltip arrow default 1`] = `
 <body>
   <div>