具有固定边栏布局的NuxtJs nuxt-link滚动行为

Question

我目前正在构建Nuxt应用程序，该应用程序在页面的左侧固定有侧边栏的布局，在页面的右侧具有可滚动的内容。

由于这种布局，我在包装div的内容容器上和内容容器上的overflow：scroll上使用了具有boxbox的flexbox：

您可以在此处查看此代码： https : //jsfiddle.net/yk6Lepq2/

现在，当使用nuxt-link时，通常会将页面滚动到顶部，但是由于布局已更改并且我的应用程序未使用初始body / html标签滚动条，因此它不会将页面滚动到顶部。 我一直在阅读NuxtjJs文档，但遗憾的是我无法确切找到如何更改要滚动的目标滚动条。

我已经在我的nuxt.config.js中放置了以下代码，但这无济于事。

router: {
    scrollBehavior: function (to, from, savedPosition) {
        return { x: 0, y: 0 }
    }
}

这里有人可以帮助我解决这个问题吗？ 任何帮助表示赞赏。

Answer 1

只需将其添加到您的身体的CSS

body {
  ...
  overflow-y: hidden;
}

然后在内容的容器元素中添加CSS属性

overflow-y: auto

这样，只有内容方会滚动。 页面的其他部分将不会滚动。 本质上，您不需要使用JavaScript即可执行此操作。