Vuetify 应用栏溢出隐藏不起作用答案

【问题标题】：Vuetify app bar overflow hidden not workingVuetify 应用栏溢出隐藏不起作用
【发布时间】：2020-04-22 09:23:41
【问题描述】：

溢出隐藏不起作用。它会创建另一个滚动条，如 image

我直接从Vuetify复制了代码，在code pen试了一下，结果还是一样。

<template>
  <v-card class="overflow-hidden">
    <v-app-bar
      absolute
      color="#fcb69f"
      dark
      shrink-on-scroll
      src="https://picsum.photos/1920/1080?random"
      scroll-target="#scrolling-techniques-2"
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
        ></v-img>
      </template>

      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Title</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>`enter code here`
    </v-app-bar>
    <v-sheet
      id="scrolling-techniques-2"
      class="overflow-y-auto"
      max-height="600"
    >
      <v-container style="height: 1000px;"></v-container>
    </v-sheet>
  </v-card>
</template>

【问题讨论】：

您想准确隐藏什么效果/部分？

标签： vue.js vuetify.js

【解决方案1】：

您需要从包装v-app-bar 和v-sheet 的v-card 中删除overflow-hidden 类。（您可以完全删除v-card）

我猜 vuetify 文档有这个，所以示例可以在他们自己的网站上运行。

【讨论】：

【解决方案2】：

发生这种情况有两个原因-

外层滚动条来自html。
- bcz 您的内容，例如 v-sheet、v-container 超出了您的屏幕高度
内部滚动条用于 v-sheet
- bcz v-sheet 的最大高度为 600 像素，其内容容器的高度为 1000 像素，超出了 v-sheet 的高度。

v-card 没有固定的高度，它的内容是灵活的。所以，不要向它添加溢出隐藏类。你应该隐藏在任何 html 或 v-sheet

【讨论】：