VuetifyJS：如何使 v-stepper-header 粘在滚动条上

Question

我正在寻找一种使<v-stepper-header>组件粘在滚动条上的方法。我尝试创建自定义 CSS 但没有成功。这是示例代码。<v-stepper v-model="step">    <v-stepper-header class="sticky">        <v-stepper-step            step="1"        >            Step 1        </v-stepper-step></v-stepper>.sticky {    position: -webkit-sticky; /* Safari */    position: sticky;    top: 0;}

Answer 1

你必须overflow: hidden退学v-stepper。

<v-stepper class="stepper">

 ...

</v-stepper>

和

.stepper {

  overflow: visible;

}

工作示例在这里。

但为什么？来自 MDN 关于位置

请注意，粘性元素“粘附”到其最近的具有“滚动机制”的祖先（当溢出被隐藏、滚动、自动或覆盖时创建），即使该祖先不是最近的实际滚动祖先。

和有用的文章 - 以及修复它的方法。