如何在 vue 和 vuetify 中添加滚动条答案

【问题标题】：How to add scrollbars to vue and vuetify如何在 vue 和 vuetify 中添加滚动条
【发布时间】：2021-02-16 18:09:08
【问题描述】：

我从 vuetify 开始，但滚动让我很困惑。我添加了不同的部分，并尝试使其彼此独立滚动。但是要么所有部分都可以通过一个滚动条滚动，要么没有部分可滚动。 Divisions of App

如何使绿色部分可滚动？如何使绿色和红色部分相互独立滚动？

这里是 App.vue：

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
    My Toolbar
    </v-app-bar>

    <v-main class="overflow-hidden">
      <v-row class="fill-height">
        <v-col grow class="text-center red overflow-hidden">
           <p>Section 1, not srollable</p>
        </v-col>
        <v-col grow class="d-flex flex-column overflow-hidden grey">
          <div class="text-center yellow overflow-hidden">
           <p>Section 2, not scrollable</p>
          </div>
          <div grow class="text-center green flex-grow-1 flex-shrink-0 overflow-auto">
            <div>
            <p>Section 2, scrollable</p>
            </div>
          </div>
          <div class="text-center blue overflow-hidden">
           <p>Section 4, not scrollable</p>
          </div>
        </v-col>
      </v-row>
    </v-main>
  </v-app>
</template>
<script>

export default {
  name: 'App',

  components: {
    //
  },

  data: () => ({
    //
  }),
};
</script>

<style>
html{
  overflow: auto;
}
</style>

提前感谢您的帮助。

【问题讨论】：

标签： css vue.js vuetify.js overflow

【解决方案1】：

有一个 CSS 属性允许我们在定义的元素内垂直滚动。

overflow-y: scroll;

尝试将overflow-y 添加到要滚动的元素。

例如，如果您只希望某个部分可滚动，您可以创建一个自定义 css 类并在其中添加 overflow-y 属性，并将该类添加到您要滚动的元素中。

例如：

.scrollable {
   overflow-y: scroll;
}

然后将该类添加到您的 div 中！

<div class="scrollable text-center green flex-grow-1 flex-shrink-0 overflow-auto">
   <div>
       <p>Section 2, scrollable</p>
   </div>
</div>

【讨论】：

感谢您的回答，但这正是问题所在。它不起作用。我是否采用了 vuetify 助手（溢出自动、溢出-y-滚动、...），也没有将其添加为自定义 css 类。总是相同的行为。要么所有部分都可滚动，要么没有。