使用elementUI滚动条之横向滚动
程序员文章站
2022-05-02 12:58:49
用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的。 将会出现滚动的内容放到上述标签内就可以了。 这里要简单的设置一下,将标签的height设为100%,读者查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可 ......
用过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;
}
推荐阅读
-
android开发之横向滚动/竖向滚动的ListView(固定列头)
-
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
-
在PYQT5中QscrollArea(滚动条)的使用方法
-
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
-
小程序scroll-view安卓机隐藏横向滚动条的实现详解
-
css横向滚动条样式(网页横向滚动条设置)
-
iOS使用UICollectionView实现横向滚动照片效果
-
android开发之横向滚动/竖向滚动的ListView(固定列头)
-
Android列表组件ListView使用详解之隐藏滚动条
-
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条