关于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 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
javascript语句中的CDATA标签的意义
May 09 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
javascript运动详解
2015/07/06 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python文件操作基本流程代码实例
2017/12/11 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
个人简历自荐信
2013/12/05 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
小学庆六一活动总结
2014/08/28 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
基于Go语言构建RESTful API服务
2021/07/25 Golang
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python