用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的。css
<el-scrollbar></el-scrollbar>
将会出现滚动的内容放到上述标签内就能够了。
这里要简单的设置一下,将标签的height设为100%,读者查看效果的时候,会出现一个横向的滚动条,若是你不想要横向的滚动条,使用下面css属性设置就能够只显示竖向滚动条。html
.el-scrollbar__wrap { overflow-x: hidden; }
示例使用以下: spa
以上是常见的用法。htm
若是需求横向滚动,可使用这个方法。参照上面的用法,前提是li标签的内容须要浮动或者 display:inline-block; 而后高度按须要定义blog
.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{ white-space: nowrap; }