关于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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
javascript中对对层的控制
Dec 29 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
学习vue.js计算属性
Dec 03 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
JavaScript 绘制饼图的示例
Feb 19 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
Syphon 秘笈
2021/03/03 冲泡冲煮
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
angularjs基础教程
2014/12/25 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python实现识别手写数字大纲
2018/01/29 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python实现Windows电脑定时关机
2018/06/20 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python+opencv实现阈值分割
2018/12/26 Python
Python定义一个Actor任务
2020/07/29 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
国际领先的学术出版商:Springer
2017/01/11 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
暑期培训随笔感言
2014/03/10 职场文书
三好学生评语大全
2014/12/29 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
高效课堂教学反思
2016/02/24 职场文书
诚信高考倡议书
2019/06/24 职场文书
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS