时间戳

首页 > 解决方案 > Vuetify 应用栏溢出隐藏不起作用

vue.js - Vuetify 应用栏溢出隐藏不起作用

问题描述

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

我直接从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.jsvuetify.js

解决方案

您需要从包含 and 的类中删除overflow-hidden该类。（您可以完全删除）v-cardv-app-barv-sheetv-card

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

推荐阅读