关于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将NodeList作为Array数组处理的方法
Jul 09 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
详解angular中的作用域及继承
May 31 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
js实现缓动动画
Nov 25 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
php 分库分表hash算法
2009/11/12 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
vue实现分页加载效果
2019/12/24 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
python 检测图片是否有马赛克
2020/12/01 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
奉献家乡演讲稿
2014/09/13 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
Python 如何解决稀疏矩阵运算
2021/05/26 Python
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS