关于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 相关文章推荐
在JavaScript中实现类的方式探讨
Aug 28 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
JS实现购物车基本功能
Nov 08 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
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
在Python中使用模块的教程
2015/04/27 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
Python中os模块功能与用法详解
2020/02/26 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Python如何根据时间序列数据作图
2020/05/12 Python
css3学习心得分享
2013/08/19 HTML / CSS
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
护士自我鉴定范文
2013/10/06 职场文书
学生处主任岗位职责
2013/12/01 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
《确定位置》教学反思
2016/02/18 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
Golang jwt身份认证
2022/04/20 Golang