关于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 相关文章推荐
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
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 循环列出目录内容的函数代码
2010/05/26 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
JS继承 笔记
2011/07/13 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
mysql 之通过配置文件链接数据库
2017/08/12 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
详解Python time库的使用
2019/10/10 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
七年级地理教学反思
2014/01/26 职场文书
经营理念口号
2014/06/21 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
综合素质评价自我评价
2015/03/06 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
详解Python flask的前后端交互
2022/03/31 Python
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android