Vuetify中卡片滚动实现及固定高度v-list滚动条显示问题咨询

Hey there! Let's tackle your two Vuetify questions one by one:

实现滚动卡片的核心思路是控制卡片内部内容容器的高度与溢出行为，Vuetify的组件体系很容易实现这个需求：

最常用的方案是给卡片的内容区域（v-card-text）设置固定高度，并开启垂直滚动：

<template>
  <v-card width="400" elevation="2">
    <v-card-title>
      滚动卡片示例
    </v-card-title>
    <!-- 固定高度+自动垂直滚动 -->
    <v-card-text class="overflow-y-auto" style="height: 300px;">
      <!-- 模拟大量内容 -->
      <p v-for="i in 50" :key="i">
        这是第{{ i }}行滚动内容，用来测试卡片的滚动效果。
      </p>
    </v-card-text>
    <v-card-actions>
      <v-btn>操作按钮</v-btn>
    </v-card-actions>
  </v-card>
</template>

• 用height: 300px给内容区域设置固定高度，也可以换成max-height适配响应式场景；
• Vuetify内置的overflow-y-auto类会在内容超出容器时自动显示垂直滚动条，内容不足时则隐藏；
• 如果需要整个卡片（包括标题、操作栏）都滚动，直接给v-card设置高度和overflow-y: auto即可，不过这种场景相对少见。

这个需求有两种简洁的实现方式，都能满足内容超出时自动出现滚动条的要求：

方法一：使用Vuetify内置的scrollable属性（推荐） #

<template>
  <v-list
    width="300"
    height="300"
    scrollable
    elevation="1"
  >
    <v-list-item v-for="i in itemCount" :key="i">
      <v-list-item-title>列表项 {{ i }}</v-list-item-title>
    </v-list-item>
    <v-btn @click="itemCount += 5">添加5个列表项</v-btn>
  </v-list>
</template>

<script setup>
import { ref } from 'vue'
const itemCount = ref(10)
</script>

• 设置height="300"给列表固定高度；
• 开启scrollable属性后，列表会自动处理溢出逻辑，内容超出高度时滚动条自动出现。

方法二：手动设置样式（更灵活） #

如果需要自定义滚动条样式或更精细的控制，可以直接给列表设置样式：

<template>
  <v-list
    width="300"
    style="height: 300px; overflow-y: auto;"
    elevation="1"
  >
    <v-list-item v-for="i in itemCount" :key="i">
      <v-list-item-title>列表项 {{ i }}</v-list-item-title>
    </v-list-item>
    <v-btn @click="itemCount += 5">添加5个列表项</v-btn>
  </v-list>
</template>

<script setup>
import { ref } from 'vue'
const itemCount = ref(10)
</script>

原理和滚动卡片一致，通过overflow-y: auto实现滚动条的自动显示/隐藏。

内容的提问来源于stack exchange，提问作者Fabio Ebner