el-scrollbar纵向滚动

el-scrollbar 的纵向滚动可以通过设置 `vertical` 属性实现，代码示例如下：

<el-scrollbar vertical style="height: 200px;">
  <!-- 这里是需要滚动的内容 -->
  <div style="height: 500px;"></div>
</el-scrollbar>

在上面的示例中，我们设置了 `vertical` 属性为 true，表示需要纵向滚动。同时为了让 el-scrollbar 在垂直方向上具有高度，我们设置了 `style` 属性为 `height: 200px;`。在 el-scrollbar 的内部，我们放置了一个高度为 500px 的 div 元素，这个元素将会出现滚动条。

相关问题

el-scrollbar纵向滚动条

el-scrollbar是一个Vue组件，用于创建一个纵向滚动条。它提供了以下功能：

1. 自定义滚动条颜色和宽度
2. 滚动条可以通过拖动来滚动
3. 当内容超出容器高度时，自动显示滚动条

使用el-scrollbar组件需要先安装Element UI库。下面是一个简单的例子：

<template>
  <el-scrollbar style="height: 200px">
    <div style="height: 500px">Content goes here</div>
  </el-scrollbar>
</template>

<script>
import { Scrollbar } from 'element-ui';

export default {
  components: {
    'el-scrollbar': Scrollbar
  }
}
</script>

在这个例子中，我们创建了一个高度为200px的容器，并在其中放置了一个高度为500px的内容。由于内容高度超过了容器高度，因此会自动显示纵向滚动条。

el-drawer嵌套el-scrollbar纵向滚动条效果

实现el-drawer嵌套el-scrollbar纵向滚动条效果，可以按照以下步骤进行：

1. 在el-drawer中添加el-scrollbar组件，设置其纵向滚动条属性：

<el-drawer>
  <el-scrollbar wrap-class="scrollbar-wrap" vertical>
    <!-- drawer content here -->
  </el-scrollbar>
</el-drawer>

2. 在CSS中为scrollbar-wrap类设置高度和overflow属性，使其能够显示纵向滚动条：

.scrollbar-wrap {
  height: 100%;
  overflow-y: auto;
}

3. 根据需要在el-drawer中设置宽度和高度，以及其他样式属性。

完整代码示例：

<template>
  <el-drawer :visible.sync="drawerVisible" :size="size">
    <el-scrollbar wrap-class="scrollbar-wrap" vertical>
      <div class="drawer-content">
        <!-- drawer content here -->
      </div>
    </el-scrollbar>
  </el-drawer>
</template>

<style>
.scrollbar-wrap {
  height: 100%;
  overflow-y: auto;
}

.drawer-content {
  width: 300px;
  height: 500px;
  padding: 20px;
}
</style>