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

最新文章

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

热门文章

  1. SQL优化 MySQL版 -分析explain SQL执行计划与笛卡尔积
  2. webservice创建、部署和调用
  3. java的设计模式 - Builder模式
  4. 学习笔记—JDBC
  5. WOW.js 使用教程
  6. Android,View转换bitmap,bitmap转换drawable
  7. Scrapy 框架流程详解
  8. CynosDB技术详解——架构设计
  9. [转]Lua和Lua JIT及优化指南
  10. windows下为qt msvc版本配置调试器