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

js 格式化时间日期函数小结

Mar 20 Javascript

JQUERY1.6 使用方法四检测浏览器

Nov 23 Javascript

利用ajaxfileupload插件实现文件上传无刷新的具体方法

Jun 08 Javascript

JS判断两个时间大小的示例代码

Jan 28 Javascript

jquery中each遍历对象和数组示例

Aug 05 Javascript

JavaScript为事件句柄绑定监听函数实例详解

Dec 15 Javascript

通过node-mysql搭建Windows+Node.js+MySQL环境的教程

Mar 01 Javascript

JavaScript数组去重的几种方法效率测试

Oct 23 Javascript

npm国内镜像安装失败的几种解决方案

Jun 04 Javascript

React组件中的this的具体使用

Feb 28 Javascript

vue-cli3 项目从搭建优化到docker部署的方法

Jan 28 Javascript

详解使用React.memo()来优化函数组件的性能

Mar 19 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/03 咖啡文化

编译php 5.2.14+fpm+memcached(具体操作详解)

2013/06/18 PHP

PHP查找与搜索数组元素方法总结

2015/06/12 PHP

php mysql获取表字段名称和字段信息的三种方法

2016/11/13 PHP

PHP中快速生成随机密码的几种方式

2017/04/17 PHP

window.onload和$(function(){})的区别介绍

2013/10/30 Javascript

Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

2014/02/12 Javascript

javascript动态设置样式style实例分析

2015/05/13 Javascript

JavaScript使用DeviceOne开发实战（一) 配置和起步

2015/12/01 Javascript

深入理解JavaScript中的call、apply、bind方法的区别

2016/05/30 Javascript

原生JS实现图片轮播与淡入效果的简单实例

2016/08/21 Javascript

jQuery实现联动下拉列表查询框

2017/01/04 Javascript

基于JavaScript实现的快速排序算法分析

2017/04/14 Javascript

angularjs中$http异步上传Excel文件方法

2018/02/23 Javascript

玩转vue的slot内容分发

2018/09/22 Javascript

webpack+vue-cli项目中引入外部非模块格式js的方法

2018/09/28 Javascript

Node+OCR实现图像文字识别功能

2018/11/26 Javascript

Vue实现远程获取路由与页面刷新导致404错误的解决

2019/01/31 Javascript

JS实现盒子拖拽效果

2020/02/06 Javascript

js实现选项卡效果

2020/03/07 Javascript

在Python中操作列表之List.append()方法的使用

2015/05/20 Python

Python脚本暴力破解栅栏密码

2015/10/19 Python

解决python2.7 查询mysql时出现中文乱码

2016/10/09 Python

Python中防止sql注入的方法详解

2017/02/25 Python

Python实现矩阵转置的方法分析

2017/11/24 Python

对Tensorflow中的变量初始化函数详解

2018/07/27 Python

Django压缩静态文件的实现方法详析

2018/08/26 Python

python代码输入数字使其反向输出的方法

2018/12/22 Python

HTML的form表单和django的form表单

2019/07/25 Python

用CSS3实现Win8风格的方格导航菜单效果

2013/04/10 HTML / CSS

html5中的input新属性range使用记录

2014/09/05 HTML / CSS

英国领先的电动可调床制造商：Laybrook

2019/12/26 全球购物

晚会开幕词

2015/01/28 职场文书

孟佩杰观后感

2015/06/17 职场文书

《穷人》教学反思

2016/02/19 职场文书

ORACLE查看当前账号的相关信息

2021/06/18 Oracle