当前位置： 移动技术网 > IT编程>网页制作>Html5 > 使用elementUI滚动条之横向滚动

使用elementUI滚动条之横向滚动

2019年02月01日  | 移动技术网IT编程  | 我要评论

超级舞者单机版,邯郸摄影,孙爱荣吧

用过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;
}

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网