el-scrollbar 横向滚动条使用方法
时间: 2025-01-28 21:03:40 浏览: 68
### Element UI `el-scrollbar` 横向滚动条使用实例
Element UI 的 `el-scrollbar` 组件支持创建自定义样式的滚动条,适用于需要处理溢出内容的场景。对于横向滚动的支持,可以通过设置容器宽度以及内部元素总宽度来实现。
下面是一个简单的例子展示如何配置并应用带有水平滚动功能的 `el-scrollbar`:
```html
<template>
<div class="scroll-container">
<!-- 使用 el-scrollbar 包裹需滚动的内容 -->
<el-scrollbar wrap-class="scrollbar-wrapper" view-class="scrollbar-view">
<ul class="horizontal-list">
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</el-scrollbar>
</div>
</template>
<script>
export default {
data() {
return {
items: Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`), // 创建一系列项目用于测试滚动效果
};
},
};
</script>
<style scoped lang="scss">
.scroll-container {
width: 100%;
}
.horizontal-list {
display: flex;
list-style-type: none;
padding-left: 0;
li {
min-width: 200px; /* 设置列表项最小宽度 */
margin-right: 8px;
background-color: #f5f7fa;
border-radius: 4px;
text-align: center;
line-height: 60px;
font-size: 14px;
}
}
/* 自定义样式类名应与组件属性中的wrapClass和viewClass对应 */
.scrollbar-wrapper {
white-space: nowrap; /* 防止文字换行影响布局 */
}
.scrollbar-view {
overflow-x: auto !important; /* 强制启用X轴上的滚动 */
}
</style>
```
此代码片段展示了如何通过 CSS 控制子元素排列方式(如采用 Flexbox),并通过调整父级 `.scroll-container` 和子节点 `.horizontal-list` 及其下拉项目的尺寸关系触发水平方向上的可滚动行为[^1]。
阅读全文
相关推荐

















