关于element-ui的隐藏组件el-scrollbar的使用


Posted in Javascript onMay 29, 2019

虽然在官方文档中没有给出这个组件,但是在源码中是有的。所以我们可以直接使用:

<el-scrollbar></el-scrollbar>

但是我们需要微调一下样式,两种情况的演示代码如下:

已知内容高度

<div style='height:800px'>
<el-scrollbar class='page-component__scroll'></el-scrollbar>
<div>
<style>
.page-component__scroll{
  height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
  overflow-x: auto;
}
<style>

高度由内容撑开

<html>
  <body>
    <div style='height:100%'>
      <el-scrollbar class='page-component__scroll'></el-scrollbar>
    <div>
  </body>
</html>

<style>
html,body{
  height:100%
  overflow:hidden; /*有效防止在页面进行手动刷新时显示内置滚动条*/
}
.page-component__scroll{
  height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
  overflow-x: auto;
}
<style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery操作input type=radio的实现代码
Jun 14 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
JS学习笔记之数组去重实现方法小结
May 29 #Javascript
基于Vue实现电商SKU组合算法问题
May 29 #Javascript
JS学习笔记之闭包小案例分析
May 29 #Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 #Javascript
elementUI select组件value值注意事项详解
May 29 #Javascript
elementUI select组件使用及注意事项详解
May 29 #Javascript
通过vue手动封装on、emit、off的代码详解
May 29 #Javascript
You might like
PHP中对数据库操作的封装
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
python中强大的format函数实例详解
2018/12/05 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
python实现简易学生信息管理系统
2020/04/05 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Python 必须了解的5种高级特征
2020/09/10 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
5s推行计划书
2014/05/06 职场文书
销售口号大全
2014/06/11 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
初中同学会致辞
2015/08/01 职场文书