a-tour在页面使用smooth属性下的异常指向
pepedd864 opened this issue · 1 comments
pepedd864 commented
- 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 commented
- 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?
错误的指向