使用elementUI滚动条之横向滚动
2024-10-11 22:06:55
用过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;
}
最新文章
- HTTP 基础知识
- nodejs httpserver
- AP创建会计科目
- vue.js插件使用(01) vue-resource
- 架构设计:负载均衡层设计方案(5)——LVS单节点安装
- Java [Leetcode 137]Single Number II
- openssl数字证书常见格式与协议介绍
- 第二种:NSObject
- 安卓无法生成R文件原因
- android Android性能优化之如何避免Overdraw
- MySQL 的安装
- Java的URL类(一)
- 微信for linux
- 日程管理Demo4中的bug
- 对于 url encode decode js 和 c# 有差异
- kswapd0 进程CPU占用过高
- DevExpress09、SimpleButton、CheckButton、DropDownButton、HScrollBar控件和VScrollBar控件
- 原生Ajax使用教程
- idea Exception in thread "http-apr-8080-exec-2" java.lang.OutOfMemoryError: PermGen space
- [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法