为什么滚动边距在 Nuxt 中不起作用？

Question

我在 Nuxt 应用程序中工作，并使用基于 CSS 的平滑滚动来锚定链接。平滑滚动本身有效，但

scroll-margin

属性没有实现任何目标......它似乎被完全忽略了。完全相同的代码在 Nuxt 应用程序之外工作正常，所以我想知道它是否与 Nuxt 有关。

代码的精简版本如下，我还创建了（工作中的）非 Nuxt codepen 以显示 Nuxt 之外的实际代码。

为了清楚起见，我只想使用 CSS 来实现 Nuxt 中带有滚动边距的平滑滚动。我不想使用 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 平滑滚动。我还尝试调整上面的代码以使用

section

、

[id]

、

section[id]

和

#myAnchor

代替

:target

但无济于事。

我期待的是：

页面平滑滚动到锚点，在其上方留出 5 雷姆边距。

实际发生的事情：

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

Answer 1

起初，我搜索了这个问题的解决方案，但和你一样，我找不到任何相关信息。所以，我回到 Nuxt 文档，发现 Nuxt 覆盖了 Vue 滚动行为。

为了解决这个问题，我在

/app/router.options.ts

创建了一个新文件并添加了一些代码行。它对我来说非常有效。这是我使用的代码：

import type { RouterConfig } from "@nuxt/schema";

export default <RouterConfig>{
  scrollBehavior(to, from, savedPosition) {
    if (to && to.hash) {
      return {
        el: to.hash,
        top: 81, // Add here the padding or margin top that you want
        behavior: "smooth",
      };
    } else {
      return { top: 0, left: 0, behavior: "smooth" };
    }
  },
};

希望对你也有帮助。