使用elementUI滚动条之横向滚动-el-scrollbar

用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的。

<el-scrollbar></el-scrollbar>

 将会出现滚动的内容放到上述标签内就可以了。 
这里要简单的设置一下,将标签的height设为100%,读者查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。

.el-scrollbar__wrap {
  overflow-x: hidden;
}

示例使用如下: 

 如果需求横向滚动,可以使用这个方法。参照上面的用法,前提是li标签的内容需要浮动或者 display:inline-block; 然后高度按需要定义

.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
   white-space: nowrap;
}

 

### 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]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值