关于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 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
JS中数组重排序方法
Nov 11 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
vue如何使用rem适配
Feb 06 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的gd2库
2017/02/09 PHP
Stop SQL Server
2007/06/21 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
angular.bind使用心得
2015/10/26 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
详解VUE 数组更新
2017/12/16 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
跟老齐学Python之用while来循环
2014/10/02 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
学生处主任岗位职责
2013/12/01 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技