Element的滚动条组件el-scrollbar

在使用ElementUI框架的时候,发现它的官网左侧栏的滚动条不是系统自带的滚动条,查了一下源码发现,还真是有实现了滚动条的功能;Element的滚动条还挺好看的,简洁不突出。
示例如下:

<div style="height: 100vh;"><!-- 注意需要给 el-scrollbar 设置高度,判断是否滚动是看它的height判断的 --><el-scrollbar style="height: 100%;"> <!-- 滚动条 --><div style="height: 500px;width: 100%;background: red;"></div><div style="height: 500px;width: 100%;background: yellowgreen;"></div><div style="height: 500px;width: 100%;background: blueviolet;"></div></el-scrollbar><!-- /滚动条 -->
</div>

element-ui滚动条组件el-scrollbar相关推荐

  1. Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性

    基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...

  2. Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案

    基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...

  3. element走马灯自动_vue Element UI走马灯组件重写

    1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...

  4. element走马灯自动_[转]vue Element UI走马灯组件重写

    1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...

  5. element ui table组件扩展关于列表编辑按钮的位置放置

    最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...

  6. 实战 | Element UI 父子组件传值与事件绑定(逆向)

    这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值 新建父组件和子组件 新建父组件 代码如下 <template><div id=& ...

  7. 实战 | Element UI 父子组件传值与事件绑定(正向)

    这是小小的本周的第三篇,本篇将会讲解关于Element UI 父子组件传值与事件绑定. 父子组件传值 新建父组件和子组件 新建父组件 代码如下 <template><div id=& ...

  8. 响应式滚动图懒加载 element ui el-carousel 组件优化代码

    响应式滚动图懒加载 element ui  el-carousel 组件优化代码 懒加载插件vue-lazyload //main.js import VueLazyload from 'vue-la ...

  9. element ui table组件筛选数据

    需求:element ui table组件筛选全部数据 element ui 文档 注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...

  10. element ui upload组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应。

    问题: Element UI Upload 组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...

最新文章

  1. 为什么匿名内部类参数必须为final类型
  2. 在Windows中将目录添加到PATH环境变量
  3. 为网站文字前面添加图标 在线调用 Font Awesome 字体icon小图标 美化网站
  4. 实现“Please wait...”效果
  5. 电脑知识:Win10系统把系统盘的软件移到D盘的简单方法
  6. matlab程序约束条件,求Xij中i,j约束条件下的程序
  7. oracle java 面试题及答案_Oracle面试题及答案
  8. python画雷达图-使用Python绘制雷达图
  9. GPS 模块个人使用经验总结
  10. 动手学深度学习pytorch入门
  11. 高职计算机专业英语说课ppt,大学英语说课比赛.ppt
  12. 詹姆斯麦迪逊大学计算机专业,詹姆斯麦迪逊大学简介_詹姆斯麦迪逊大学介绍_詹姆斯麦迪逊大学James Madison University (JMU)...
  13. linux 内核配置ip地址,linux内核IP地址转换函数
  14. 企业自动运行系统——价格策略
  15. 开源在线客服系统源码(支持PC/H5/公众号/小程序)基于golang的网页在线客服系统...
  16. 台式计算机的主流配置,目前, 台式电脑的主流配置是什么样的?
  17. 飞思卡尔16位单片机(十四)—— CAN总线模块测试
  18. 21考研:你是为了什么考研?
  19. python一行代码实现白噪声检测
  20. android 点击返回键home,android Home键和返回键

热门文章

  1. vpc数量上限_服务器虚拟机最大数量限制
  2. 盈建科弹性板6计算_YJK参数设置详细解析
  3. html5 音乐转盘,HTML5 幸运大转盘
  4. xml生成java代码_在Eclipse中从XML生成Java代码
  5. MS DOS窗口进入JAVA源程序,从java程序运行MS-DOS命令
  6. 康众平板探测器_2020-2025年数字化X线探测器行业市场深度调研及投资前景预测分析报告 数字化设备成为市场主流...
  7. python celery定时任务_Celery(四)定时任务
  8. 如何去除360浏览器“网页走丢了”页面广告
  9. spark的朴素贝叶斯分类原理
  10. 比人高效10倍,3分钟就能评估帕金森!这是腾讯新推出的AI医生