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

使用elementUI滚动条之横向滚动的更多相关文章

  1. html5 tab横向滚动,无滚动条(transform:translate)

    html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处 ...

  2. swiper3d横向滚动多张炫酷切换banner

    最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...

  3. react-native 横向滚动的商品展示

    在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件  ShopCenter {/*** 横向滚动 *** ...

  4. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  5. AntV F2 数据可视化填坑,图表横向滚动

    柱状图横向滚动 思路 通过 Interaction 实现平移,通过 ScrollBar 显示滚动条 1.Interaction F2 提供一套交互机制,以达到通用交互行为的封装和复用.基于此机制,我们 ...

  6. web开发 小方法1-禁止横向滚动

    最近学了学做了个公司的网站  总结了一些小方法 比如取消横向滚动条并禁止的横向滚动 这样就可以吧超出的切掉让网页更和谐 在body 标签 body{ text-align: center; overf ...

  7. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  8. 一款兼容IE6并带有多图横向滚动的jquery特效

    一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...

  9. 李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView

    李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView 11111222

随机推荐

  1. Python:黑板课爬虫闯关第五关

    第五关是最后一关了,至此之后黑板课就没有更新过关卡了. 第五关地址:http://www.heibanke.com/lesson/crawler_ex04/ 可以看到,是在第三关的基础上加了验证码. ...

  2. WinDbg调试C#技巧,解决CPU过高、死锁、内存爆满

    软件安装 安装问题:执行 .loadby sos clr 命令无效 解决办法: .load C:\Windows\Microsoft.NET\Framework64\v4.0.30319\SOS.dl ...

  3. cocos creator主程入门教程(七)—— MVC架构

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇将介绍在游戏客户端常用的架构MVC架构.一个游戏的MVC如下划分: M:1)单例全局的数据中心Wo ...

  4. 学了两天 react,乱讲一下学习思路,顺便弄了一个脚手架

    之前一直用 vue 做一些小项目,最近接触了一个项目是用 react 做前端,虽然本身是做后端开发的,但是前端还是要了解一点的. 现在的项目基本上都是前后端分离的,后端就先不提了.前端的框架也是层出不 ...

  5. IL中间语言指令大全

    一些 IL 语言指令解释: Public field Static     Beq     如果两个值相等,则将控制转移到目标指令.Public field Static     Beq_S     ...

  6. 由于服务主机:DCOM服务进程占用过多CPU,导致系统卡死

    最近在使用电脑的时候,总是出现电脑死机,而且鼠标也是经常卡在那里不动了,开始以为是鼠标的问题,还换了个鼠标(飙泪中),这还是一个血的教训啊!!!之后打开任务管理器发现CPU占用已经达到100%,而且一 ...

  7. 折腾Java设计模式之单例模式

    博文原址:折腾Java设计模式之单例模式 单例模式 Ensure a class has only one instance, and provide a global point of access ...

  8. C# 通用单例窗体类

    /// <summary> /// 通用的单例制作器 /// </summary> /// <typeparam name="T"></t ...

  9. Android中的线程池

    在Android中,主线程不能执行耗时的操作,否则可能会导致ANR.那么,耗时操作应该在其它线程中执行.线程的创建和销毁都会有性能开销,创建过多的线程也会由于互相抢占系统资源而导致阻塞的现象.这个时候 ...

  10. gitbook 入门教程之主题插件

    主题插件 目前 gitbook 提供三类文档: Book 文档,API 文档和 FAQ 文档. 其中,默认的也是最常使用的就是 Book 文档,如果想要了解其他两种文档模式,需要引入相应的主题插件. ...