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

解决FireFox下[使用event很麻烦]的问题

Nov 26 Javascript

15款优秀的jQuery导航菜单插件分享

Jul 19 Javascript

jQuery学习笔记之jQuery构建函数的7种方法

Jun 03 Javascript

超实用的JavaScript代码段附使用方法

May 22 Javascript

JavaScript实现256色转灰度图

Feb 22 Javascript

Vue 项目分环境打包的方法示例

Aug 03 Javascript

VUE-cli3使用 svg-sprite-loader

Oct 20 Javascript

es6函数name属性功能与用法实例分析

Apr 18 Javascript

vue实现五子棋游戏

May 28 Javascript

微信小游戏中three.js离屏画布的示例代码

Oct 12 Javascript

浅析微信小程序自定义日历组件及flex布局最后一行对齐问题

Oct 29 Javascript

前端学习——JavaScript原生实现购物车案例

Mar 31 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

NO3第三帝国留言簿制作过程

2006/10/09 PHP

PHP转换IP地址到真实地址的方法详解

2013/06/09 PHP

PHP实现的封装验证码类详解

2013/06/18 PHP

浅析php插件 HTMLPurifier HTML解析器

2013/07/01 PHP

golang与php实现计算两个经纬度之间距离的方法

2016/07/22 PHP

PHP支付系统设计与典型案例分享

2016/08/02 PHP

用php定义一个数组最简单的方法

2019/10/04 PHP

img的onload的另类用法

2008/01/10 Javascript

jQuery中(function(){})()执行顺序的理解

2013/03/05 Javascript

使用非html5实现js板连连看游戏示例代码

2013/09/22 Javascript

js改变embed标签src值的方法

2015/04/10 Javascript

javascript DIV实现跟随鼠标移动

2020/03/19 Javascript

JavaScript如何实现跨域请求

2016/08/05 Javascript

JS读写CSS样式的方法汇总

2016/08/16 Javascript

jquery实现多次上传同一张图片

2017/01/09 Javascript

Node使用Nodemailer发送邮件的方法实现

2020/02/24 Javascript

vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

2020/02/25 Javascript

vue3中轻松实现switch功能组件的全过程

2021/01/07 Vue.js

[01:31]（回顾）杀出重围，决战TI之巅

2014/07/01 DOTA

利用aardio给python编写图形界面

2017/08/21 Python

Python实现购物车功能的方法分析

2017/11/10 Python

Python使用matplotlib填充图形指定区域代码示例

2018/01/16 Python

Python八大常见排序算法定义、实现及时间消耗效率分析

2018/04/27 Python

详解Python中的正则表达式

2018/07/08 Python

python3 flask实现文件上传功能

2020/03/20 Python

python+unittest+requests实现接口自动化的方法

2018/11/29 Python

IntelliJ IDEA安装运行python插件方法

2018/12/10 Python

Python+Selenium使用Page Object实现页面自动化测试

2019/07/14 Python

django中账号密码验证登陆功能的实现方法

2019/07/15 Python

对python中的装包与解包实例详解

2019/08/24 Python

2014年计算机专业个人自我评价

2014/01/19 职场文书

八一建军节活动方案

2014/02/10 职场文书

2014应届本科生自我评价

2014/09/13 职场文书

女方离婚起诉书

2015/05/18 职场文书

Python读写yaml文件

2022/03/20 Python

mongoDB数据库索引快速入门指南

2022/03/23 MongoDB