a-tour在页面使用smooth属性下的异常指向

[pepedd864]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.0.5

Environment

Windows 11, Edge 121, Vue 3.3

主要代码

<template>
  <div>
    <a-tour
      v-model:current="current"
      :steps="steps"
      :open="open"
      @close="open = false"
    />
    <a-button @click="open = !open">按钮</a-button>
    <div class="container">
      <div class="left">
        <div class="card">test</div>
      </div>
      <div class="right">
        <a href="#">返回首页</a>
        <div class="card">test</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const current = ref(0);
const open = ref(false);
const steps = ref([
  {
    title: "第一步",
    target: () => document.querySelector(".left .card"),
  },
  {
    title: "第二步",
    target: () => document.querySelector(".right .card"),
  },
]);
</script>

<style>
/* 如果使用了 smooth tour的指向将不准确 */
html,
body {
  scroll-behavior: smooth;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  width: 80%;
  height: 100%;

  .left {
    position: relative;
    top: 0;
    width: 200px;
    height: 100vh;
    border: 1px red solid;
  }

  .right {
    position: relative;
    top: 100vh;
    width: 200px;
    height: 100vh;
    border: 1px blue solid;
  }
}
</style>

Reproduction link

Steps to reproduce

使用页面使用smooth属性会出现异常指向

What is expected?

正确的指向

What is actually happening?

错误的指向

[pepedd864]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.0.5

Environment

Windows 11, Edge 121, Vue 3.3

主要代码

<template>
  <div>
    <a-tour
      v-model:current="current"
      :steps="steps"
      :open="open"
      @close="open = false"
    />
    <a-button @click="open = !open">按钮</a-button>
    <div class="container">
      <div class="left">
        <div class="card">test</div>
      </div>
      <div class="right">
        <a href="#">返回首页</a>
        <div class="card">test</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const current = ref(0);
const open = ref(false);
const steps = ref([
  {
    title: "第一步",
    target: () => document.querySelector(".left .card"),
  },
  {
    title: "第二步",
    target: () => document.querySelector(".right .card"),
  },
]);
</script>

<style>
/* 如果使用了 smooth tour的指向将不准确 */
html,
body {
  scroll-behavior: smooth;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  width: 80%;
  height: 100%;

  .left {
    position: relative;
    top: 0;
    width: 200px;
    height: 100vh;
    border: 1px red solid;
  }

  .right {
    position: relative;
    top: 100vh;
    width: 200px;
    height: 100vh;
    border: 1px blue solid;
  }
}
</style>

Reproduction link

Steps to reproduce

使用页面使用smooth属性会出现异常指向

What is expected?

正确的指向

What is actually happening?

错误的指向

@tangjinzhou @wangxueliang