Vuetify：为滚动条保留空间

编程问答 2022-07-24

问题描述

我有一个<v-navigation-drawer>，其中包含多个<v-cards>。单击按钮时，会出现更多的卡，并且它们会溢出屏幕。因此会出现一个滚动条。问题在于，这会更改卡的宽度，从而使过渡效果看起来很糟糕。

是否有一种方法已经为滚动条保留了空间，或者将其覆盖在卡的顶部，而不是使其改变卡的宽度？ 我已经尝试过与overflow-y一起玩，但是还没有找到一个能正常工作的人...

Before clicking on the button

After clicking on the button

这是我的问题的示例代码：

<template>
  <div>
    <v-navigation-drawer app left width="450" clipped>
      <v-card>
        <img src="https://pbs.twimg.com/profile_images/875996174305472512/upM71pVR.jpg" />
      </v-card>
      <v-card>
        <v-btn @click="showImage = !showImage">Show Image</v-btn>
      </v-card>
      <v-card v-if="showImage">
        <img src="https://i.pinimg.com/originals/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg" />
      </v-card>
    </v-navigation-drawer>
  </div>
</template>

<script>
export default {
  name: "TopBar",data: () => ({
    showImage: false
  })
};
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptoverflowscrollbarvue.jsvuetify.js