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

Question

I'm currently building a Nuxt application with a layout of a fixed sidebar on the left side of the page, and scrollable content on the right side of the page.

Because of this layout I use flexbox with overflow:hidden on the page wrapping div, and on the content container overflow:scroll

You can view the code for this here: https://jsfiddle.net/yk6Lepq2/

Now when using a nuxt-link, normally it will scroll the page to the top, but since the layout has been changed and my application isn't using the initial body/html tag scrollbar it won't scroll the page to the top. I have been reading the NuxtjJs documentation but sadly I can't exactly find out how to change the target scrollbar to be scrolled.

I already put the following code in my nuxt.config.js but that doesn't help.

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

Is anybody here able to help me out with this problem? Any help is appreciated.

Answer 1

Simply add this to the css of your body

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

then in the container element for your content add the CSS property

overflow-y: auto

that way, only the content side will scroll. Other parts of the page won't scroll. In essence, you don't need javascript to do this.