• 豌豆资源网
  • 开引网企业服务
  • 服务外包网
  • 使用elementUI滚动条之横向滚动

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

    <el-scrollbar></el-scrollbar>

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

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

    示例使用如下:  

    以上是常见的用法。

    广州vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

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

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

     

     
    posted @ 2020-09-19 13:22  前端一点红  阅读(4726)  评论(0编辑  收藏  举报
  • 乐游资源网
  • 热爱资源网
  • 灵活用工代发薪平台
  • 企服知识
  • 355软件知识