Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] Title 嵌套tabs并启用scrollspy直接滚动错位, sticky定位也错位 #13102

Open
CLHaoer opened this issue Sep 4, 2024 · 1 comment
Assignees

Comments

@CLHaoer
Copy link

CLHaoer commented Sep 4, 2024

Vant Version

4.9.4

Describe the Bug

FloatingPanel嵌套tabs并启用scrollspy sticky,就会出现这个两个功能的布局和定位错位问题

Reproduce Steps

<template>
  <div id="app">
    <van-floating-panel v-model:height="height" :anchors="anchors">
      <van-tabs scrollspy sticky>
        <van-tab v-for="index in 8" :title="'标签 ' + index">
          <div class="content" :style="{ height: `${index * 100}px` }">
            {{ index }} aaaa
          </div>
        </van-tab>
      </van-tabs>
    </van-floating-panel>
  </div>
</template>

<script setup>
import {ref} from 'vue'
const anchors = [
  100,
  Math.round(0.4 * window.innerHeight),
  Math.round(0.7 * window.innerHeight),
];
const height = ref(anchors[0]);
</script>

Device / Browser

No response

@pany-ang
Copy link
Contributor

pany-ang commented Sep 6, 2024

应该是和这个情况类似:https://vant.pro/vant/#/zh-CN/tab#tabs-kai-qi-swipeable-huo-animated-shu-xing-hou-nei-rong-qu-yuan-su-de-sticky-gong-neng-jiang-bu-da-yu-qi

这是因为 transform 元素内部的 fixed 定位会相对于该元素进行计算,而不是相对于整个文档,从而导致布局异常。

@inottn inottn self-assigned this Sep 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants