首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

关于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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

关于element-ui的隐藏组件el-scrollbar的使用

- Author -

gorkys

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中的prototype使用说明
Apr 13 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
微信小程序如何引用外部js，外部样式，公共页面模板
Jul 23 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
vue中div禁止点击事件的实现
Apr 02 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
77A(2) BOSE(2) 音箱(1) 晶体管(2) 耳机(1) 摩托罗拉(1) 66-XI(1) MOTOROLA(1) 军机(1) 收信机(3)
You might like
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
取选中的radio的值
2010/01/11 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
canvas学习之API整理笔记（二）
2016/12/29 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
微信小程序实现跳转的几种方式总结（推荐）
2019/04/24 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python 实时遍历日志文件
2016/04/12 Python
Python模拟用户登录验证
2017/09/11 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
python把转列表为集合的方法
2019/06/28 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
简单分析python的类变量、实例变量
2019/08/23 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python关于倒排列的知识点总结
2020/10/13 Python
迎接领导欢迎词
2014/01/11 职场文书
甜品店创业计划书
2014/09/21 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
学校党员干部承诺书
2015/05/04 职场文书
小学思想品德教学反思
2016/02/24 职场文书
python爬虫--selenium模块
2021/03/31 Python
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
《游戏王：大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏