关于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操作Radio方法小结
Oct 20 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
JS如何判断json是否为空
Jul 06 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
vue全屏事件开发详解
Jun 17 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
用js实现放大镜效果
Oct 28 Javascript
从原生JavaScript到React深入理解
Jul 23 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
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python日志模块logbook使用方法
2019/09/19 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
基于matplotlib xticks用法详解
2020/04/16 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
服务员岗位职责
2014/01/29 职场文书
新护士岗前培训制度
2014/02/02 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
验房委托书
2014/08/30 职场文书
2014年党小组工作总结
2014/12/20 职场文书
旷工检讨书1000字
2015/01/01 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
TensorFlow的自动求导原理分析
2021/05/26 Python
python异常中else的实例用法
2021/06/15 Python