使用el-scrollbar实现横向滚动条
时间: 2025-02-08 12:59:09 浏览: 66
### 使用 Element Plus `el-scrollbar` 组件实现横向滚动
为了创建带有横向滚动条的效果,可以调整 `el-scrollbar` 的属性并设置容器宽度来触发水平溢出。下面是一个完整的示例说明如何配置 Vue 3 和 Element Plus 来展示带横向滚动的内容。
#### HTML 结构与样式定义
通过模板部分定义了一个包含多个项目的列表,这些项会超出父级容器的宽度从而激活横滚轴:
```html
<template>
<div style="width: 100%; overflow-x: hidden;">
<!-- 设置固定高度 -->
<el-scrollbar width="80%" :noresize="true">
<div class="scroll-container">
<div v-for="(item, index) in items" :key="index" class="scroll-item">{{ item }}</div>
</div>
</el-scrollbar>
</div>
</template>
<style scoped>
.scroll-container {
display: flex;
}
.scroll-item {
min-width: 200px; /* 控制单个项目最小宽度 */
padding: 20px;
box-sizing: border-box;
text-align: center;
}
</style>
```
此代码片段设置了 `.scroll-container` 类作为内部包裹器,并赋予其弹性布局特性以便子元素能够沿水平方向排列[^2]。每个`.scroll-item` 都有一个固定的最小宽度,当它们累积起来超过外部容器(`el-scrollbar`)设定的最大宽度时就会启用横向滚动功能。
#### JavaScript 数据初始化
在脚本区域中准备一些虚拟数据用于渲染上述结构中的重复元素:
```javascript
<script setup lang="ts">
import { ref } from 'vue';
const items = ref(Array.from({ length: 15 }, (_, i) => `Item ${i + 1}`));
</script>
```
这段 TypeScript 脚本利用了 Vue Composition API 中的 `ref()` 函数来声明响应式的数组变量 `items` ,该数组包含了十五个字符串形式的数据项,模拟实际应用里可能存在的动态内容集合。
阅读全文
相关推荐


















