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

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

Answer 1

此解决方案对我有用：

 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文件中添加此代码

Answer 2

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


    html{
      overflow-y: hidden;
    }

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

Answer 3

此问题对我有用，只需添加

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

到您的样式文件。

完整文档hide scroll bar

Answer 4

这样的事情：

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

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

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

Answer 5

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

html{
  overflow-y: hidden;
}

v-app

5 个答案: