关于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之HTMLCollection接口代码
Apr 27 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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
Home Coffee Roasting
2021/03/03 咖啡文化
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
php Session无效分析资料整理
2016/11/29 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
js类 from qq
2006/11/13 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python中的日期时间处理详解
2016/11/17 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
资产评估专业大学生求职信
2013/09/29 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
单位实习介绍信
2015/05/05 职场文书
男人帮观后感
2015/06/18 职场文书