v-app主区域的滚动条

Question

我从https://vuetifyjs.com/layout/pre-defined复制了一个预定义布局。

然而，当主要部分的内容溢出时，会导致整个应用程序出现滚动条，而不是对主要部分进行本地滚动。以下是一个示例：

<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>

我尝试在不同的部分添加了class="scroll-y"和 style="max-height: 100%"，但没有进展。 我需要指定什么才能使滚动条只影响主要部分？

- Andy T

Answer 1

这对我有帮助，只需添加。

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

到你的样式文件中添加。

完整文档隐藏滚动条

- Wicak

---

将样式直接添加到根元素HTML还会添加到所有其他页面，因此这对于特定的“视图”无效。 - Sankar Behera

Answer 2

我发现以下方法可以解决我的问题：

我遇到的问题如下：

    html{
      overflow-y: hidden;
    }

您可以将其放在App.vue文件中，或者放在项目的index.html目标文件中。

- Ian Fabs

---

谢谢您，但它还是不起作用，滚动条仍然存在。 - Kevin

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文件中

- alpha

---

这是一个可行的答案，即使后来出现滚动条，例如在使用导航抽屉时。 - U2ros

Answer 4

在你的文件中找到 index.html 文件并打开它， 然后在文件底部添加：

html{
  overflow-y: hidden;
}

- RayKira

Answer 5

类似这样：

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

我相信你可以想出如何实现这一点，你只需要确保你的主父级不滚动，并将 overflow-y 应用于你想要在其中滚动的元素。

- Stephan-v