Scroll bar in the main section of a v-app

Question

I have copied one of the pre-defined layouts from https://vuetifyjs.com/layout/pre-defined.

However when the content of the main section overflows it cause a scroll to appear for the whole app, rather than a local scroll to the main section. Here is an example:

<template>
    <v-app toolbar footer>

        <v-toolbar class="blue darken-3" dark>
        </v-toolbar>

        <v-navigation-drawer permanent clipped light absolute>
        </v-navigation-drawer>

        <main>
            <v-container>
                <p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p>
            </v-container>
        </main>
    </v-app>
</template>

I've tried adding class="scroll-y" and style="max-height: 100%" to various sections with no progress.

What do I need to specify for the scroll to only affect the main section?

Answer 1

这个问题对我有用，只需添加

<style>
  html { overflow-y: auto }
</style>

到您的样式文件。

完整文档隐藏滚动条

Answer 2

我发现这可以解决我遇到的问题：

    html{
      overflow-y: hidden;
    }

你可以把它放在你的 App.vue 文件中，或者放在项目 index.html 目标文件中

Answer 3

这个解决方案对我有用：

 mounted: function() {
    let elHtml = document.getElementsByTagName('html')[0]
    elHtml.style.overflowY = 'auto'
  },
  destroyed: function() {
    let elHtml = document.getElementsByTagName('html')[0]
    elHtml.style.overflowY = null
  },

将此代码添加到您的文件 App.js 中