Nuxt中scroll-margin属性失效问题求助

开发Nuxt应用时，我用CSS实现锚点链接的平滑滚动，平滑滚动功能正常，但scroll-margin属性完全被忽略。完全相同的代码在非Nuxt环境可以正常运行，因此怀疑这是Nuxt相关的问题。

我明确希望仅使用CSS在Nuxt中实现带scroll-margin的平滑滚动，不想使用JavaScript或Vue/Nuxt内置功能。万不得已才会考虑其他方案，但至少想知道scroll-margin为何无效。

精简代码 #

HTML代码 #

<main>
    <header>Fixed header</header>

    <section><a href="#scroll-section">Click this link to scroll to a section further down the page and show the targeted state</a>. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
    
    <section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>

    <section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>

    <section id="scroll-section"> <strong class="show-on-target">Check out the space between this block and the header 👆 The block is clear of the header thanks to the <code>scroll-margin</code> property. The block was blue before you clicked the link and this text wasn't here either.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>

    <section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>

    <section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
</main>

SCSS代码 #

* {
    box-sizing: border-box;
    font-family: helvetica;
    margin-inline: 0;
    line-height:1.5;
}

html {
    scroll-behavior: smooth;
}

header {
    position: fixed;
    display: grid;
    place-content: center;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3rem;
    background: #ed6a5a;
    font-size: 1.5rem;
}

section {
    background: #9bc1bc;    
    padding: 50px 30px;
    
    &:nth-child(2n) {
        background: #f4f1bb;
    }
    
    &:first-of-type {
        padding-block-start: 20vh;
    }
}

strong {
    font-size: 1.2em;
}

code {
    font-family: monospace;
}

:target {
    scroll-margin: 5rem;
    background: #F2D7EE;
    
    .show-on-target {
        display: block;
        margin-block-end: 20px;
    }
}

.show-on-target {
    display: none;
}

尝试过的操作 #

• 使用上述代码创建纯CSS的带scroll-margin的平滑滚动
• 将代码中的:target替换为section、[id]、section[id]和#myAnchor，均无效

预期结果 #

页面平滑滚动到锚点，锚点上方保留5rem的边距。

实际结果 #

页面平滑滚动到锚点，但锚点上方没有边距。

内容的提问来源于stack exchange，提问作者Andrew