v-app 主要部分的滚动条答案

【问题标题】：Scroll bar in the main section of a v-appv-app 主要部分的滚动条
【发布时间】：2018-03-13 08:04:56
【问题描述】：

我从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%" 添加到各个部分，但没有任何进展。

我需要为滚动指定什么以仅影响主要部分？

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

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

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

到你的样式文件。

完整文档hide scroll bar

【讨论】：

将样式直接添加到根元素 html 也会添加到所有其他页面，因此这不适用于特定的 view

【解决方案2】：

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


    html{
      overflow-y: hidden;
    }

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

【讨论】：

谢谢，但是不行，滚动条还在，

【解决方案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 中

【讨论】：

即使滚动条稍后出现，这也是有效的答案，例如使用 NavigationDrawers 时

【解决方案4】：

类似这样的：

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

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

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

【讨论】：

【解决方案5】：

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

html{
  overflow-y: hidden;
}

【讨论】：