youzan / vant

A lightweight, customizable Vue UI library for mobile web apps.
https://vant.pro/vant/
MIT License
23.16k stars 9.48k forks source link

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

Open CLHaoer opened 2 weeks ago

CLHaoer commented 2 weeks ago

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 commented 1 week ago

应该是和这个情况类似: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 定位会相对于该元素进行计算,而不是相对于整个文档,从而导致布局异常。