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">&nbsp;...</v-stepper>和.stepper {&nbsp; overflow: visible;}工作示例在这里。但为什么？来自 MDN 关于位置请注意，粘性元素“粘附”到其最近的具有“滚动机制”的祖先（当溢出被隐藏、滚动、自动或覆盖时创建），即使该祖先不是最近的实际滚动祖先。和有用的文章&nbsp;- 以及修复它的方法。