用过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. 使用java语言,将字符串中连续重复出现的字母变成“出现次数“+字母的格式

    今天在简书上看到这样一道有趣的算法题: 解题思路 首先定义一个变量element,默认是字符串的第一个字符.以element为基准元素,去判断某个字符是否重复.然后再去定义一个变量count去记录重复 ...

  2. Docker进阶之四:centos7安装docker

    centos7.6 安装docker 参考:https://docs.docker.com/install/linux/docker-ce/centos/ 一.存在老版本先删除 yum remove ...

  3. .NetCore WebAPI采坑之路(持续更新)

    1.WebAPI新增日志过滤器or中间件后Action读取到的请求Body为空问题 案例: 自定义了一个中间件,用于记录每次访问webapi的入参,以及引用了Swagger. 先看下面这段代码: pu ...

  4. Linux环境变量配置全攻略

    Linux环境变量配置 在自定义安装软件的时候,经常需要配置环境变量,下面列举出各种对环境变量的配置方法. 下面所有例子的环境说明如下: 系统:Ubuntu 14.0 用户名:uusama 需要配置M ...

  5. shared_ptr和动态数组

    std::shared_ptr智能指针是c++11一个相当重要的特性,可以极大地将开发者从资源申请/释放的繁重劳动中解放出来. 然而直到c++17前std::shared_ptr都有一个严重的限制,那 ...

  6. ServiceStack.Redis 请求次数6000次异常

    Redis是一个非常NB的内存级的数据库,我们可以把很多”热数据“(即读写非常多的数据)放入其中来操作,这样就减少了和关系型数据库(如SqlServer/My Sql等)之间的交互,程序的响应速度也大 ...

  7. vue v-for动画bug

    因为是v-for 循环 出来的,:key = "index" 会出现问题,所以,需要把:key="XXX"换成其他属性就好了. 链接参考: https://se ...

  8. 自己动手写事件总线(EventBus)

    本文由云+社区发表 事件总线核心逻辑的实现. EventBus的作用 Android中存在各种通信场景,如Activity之间的跳转,Activity与Fragment以及其他组件之间的交互,以及在某 ...

  9. TCP点对点转发的实现与原理(nodejs)

    Nagent Nagent是TCP点对点转发实现,名称来源于Nat与Agent的组合.类似frp项目,可以在局域网与互联网提供桥梁. 前提是你要有一台流量服务器并且有一个公网IP.如果没有,也可以找服 ...

  10. 【集合框架】JDK1.8源码分析之ArrayList详解(一)

    [集合框架]JDK1.8源码分析之ArrayList详解(一) 一. 从ArrayList字表面推测 ArrayList类的命名是由Array和List单词组合而成,Array的中文意思是数组,Lis ...