时间戳

首页 > 解决方案 > 具有固定侧边栏布局的 NuxtJs nuxt-link 滚动行为

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

问题描述

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

由于这种布局，我在页面包装 div 和内容容器上使用带有溢出：隐藏的 flexbox 和溢出：滚动

你可以在这里查看代码： https ://jsfiddle.net/yk6Lepq2/

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

我已经将以下代码放在我的 nuxt.config.js 中，但这没有帮助。

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

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

标签： javascriptscrollnuxt.js

解决方案

只需将其添加到您身体的 css 中

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

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

overflow-y: auto

这样，只有内容侧会滚动。页面的其他部分不会滚动。本质上，您不需要 javascript 来执行此操作。

推荐阅读