编程 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 相关文章推荐

jQuery选择没有colspan属性的td的代码

Jul 06 Javascript

jquery异步跨域访问代码

Jun 28 Javascript

JS替换文本域内的回车示例

Feb 18 Javascript

Jquery实现动态切换图片的方法

May 18 Javascript

JavaScript实现仿网易通行证表单验证

May 25 Javascript

用javascript实现自动输出网页文本

Jul 30 Javascript

JS实现来回出现文字的状态栏特效代码

Oct 31 Javascript

jquery自定义表单验证插件

Oct 12 Javascript

巧用Javascript的逻辑运算符

Dec 02 Javascript

详解Vue.js入门环境搭建

Mar 17 Javascript

用Axios Element实现全局的请求loading的方法

Mar 15 Javascript

vue + elementUI实现省市县三级联动的方法示例

Oct 29 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

咖啡知识除了喝咖啡还有那些知识点

2021/03/06 新手入门

简单采集了yahoo的一些数据

2007/02/14 PHP

zf框架的session会话周期及次数限制使用示例

2014/03/13 PHP

用PHP解决的一个栈的面试题

2014/07/02 PHP

php操作（删除,提取,增加）zip文件方法详解

2015/03/12 PHP

jQuery获取json后使用zy_tmpl生成下拉菜单

2015/03/27 PHP

PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析

2017/07/22 PHP

phpMyAdmin通过密码漏洞留后门文件

2018/11/20 PHP

JavaScript加密解密7种方法总结分析

2007/10/07 Javascript

jquery 学习之二属性相关

2010/11/23 Javascript

javascript级联下拉列表实例代码(自写)

2013/05/10 Javascript

JavaScript实现简单图片滚动附源码下载

2014/06/17 Javascript

JS实现仿雅虎首页快捷登录入口及导航模块效果

2015/09/19 Javascript

JavaScript中Object.prototype.toString方法的原理

2016/02/24 Javascript

JS打印组合功能

2016/08/04 Javascript

动态加载权限管理模块中的Vue组件

2018/01/16 Javascript

jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法

2018/01/18 jQuery

js删除数组中的元素delete和splice的区别详解

2018/02/03 Javascript

python散点图实例之随机漫步

2018/08/27 Python

python分批定量读取文件内容,输出到不同文件中的方法

2018/12/08 Python

PyCharm2019安装教程及其使用(图文教程)

2019/09/29 Python

Python二维数组实现求出3*3矩阵对角线元素的和示例

2019/11/29 Python

Python参数传递对象的引用原理解析

2020/05/22 Python

Html5饼图绘制实现统计图的方法

2020/08/05 HTML / CSS

顶级宝石首饰网络零售商：Angara

2016/10/25 全球购物

麦德龙官方海外旗舰店：德国麦德龙超市

2017/12/23 全球购物

Linux内核产生并发的原因

2012/07/13 面试题

两道JAVA笔试题

2016/09/14 面试题

医学毕业生自我鉴定

2013/10/30 职场文书

教师应聘个人求职信

2013/12/10 职场文书

2014年大学宣传部工作总结

2014/12/19 职场文书

北京故宫导游词

2015/01/31 职场文书

2016年大学生寒假社会实践心得体会

2015/10/09 职场文书

工伤调解协议书

2016/03/21 职场文书

创业计划书之珠宝饰品

2019/08/26 职场文书

总结Python使用过程中的bug

2021/06/18 Python