element-ui的隐藏组件el-scrollbar的使用(解决原生滚动条没有隐藏的问题 高宽设置)
element-ui的官网页面使用的这个滚动条,但是在官网文档中没有介绍这个组件。在vue+elementui搭建的前端项目中使用这个el-scrollbar组件。在项目中使用这个组件时由于各层的样式没有设置好,可能会显示出原生的滚动条,特此记录。搭建脚手架项目,安装element-ui插件按需引入需要的组件import Vue from 'vue'import {Scrollbar} from
·
element-ui的官网页面使用的这个滚动条,但是在官网文档中没有介绍这个组件。
在vue+elementui搭建的前端项目中使用这个el-scrollbar组件。
在项目中使用这个组件时由于各层的样式没有设置好,可能会显示出原生的滚动条,特此记录。
-
搭建脚手架项目,安装element-ui插件
-
按需引入需要的组件
import Vue from 'vue' import { Scrollbar } from 'element-ui' Vue.use(Scrollbar)
-
使用
<div class="main"> <el-scrollbar> 。。。要滚动的内容 </el-scrollbar> </div>
// less样式 .main { width: 100%; height: 100%; // 建议设置父级元素的高度,这样div.el-scrollbar就可以通过%来设置高度 padding: 0; overflow: hidden; .el-scrollbar { width: 100%; // 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区 height: 100%; // 必须设置el-scrollbar的高度 /deep/ .el-scrollbar__wrap { // 实际上我们的内容是放在这个div下面的 // height: 100%; // 渲染出来的div.el-scrollbar__wrap默认会添加height:100%的属性。我们可以设置为105%来隐藏元素水平滚动条 height: 100%; overflow: scroll; overflow-x:auto; } } }
-
渲染出来的dom结构
<div class="main"> <!-- el-scrollbar组件内部大致样子 --> <div class="el-scrollbar"> <div class="el-scroll__wrap" style="margin-bottom: -17px; margin-right: -17px;"> 。。。要滚动的内容 </div> <div class="el-scrollbar__bar is-horizontal"></div> <!--水平滚动条 通过position定位--> <div class="el-scrollbar__bar is-vertical"></div> <!--垂直滚动条 通过position定位--> </div> </div>
-
渲染出来的dom结构的理解
- el-scrollbar组件的内部封装了这样一个div
<div class="el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
div.el-scrollbar__wrap
上添加一个margin-bottom和margin-right的样式,且值为负数(-17px),- 如果
div.el-scrollbar__wrap
没有设置宽度,那么设置margin-right为负值,会增加这个元素宽度(这里涉及到一个知识点:margin为负值时的作用),可以看到这个这个元素宽度变宽了,而div.el-scrollbar
这个元素默认设置了overflow: hidden。所以会隐藏掉div.el-scrollbar__wrap
的右边变宽的部分(也就是能隐藏掉原生的滚动条) - 我们看到的漂亮的滚动条实际上是两个细长div,这两个div的位置是通过绝对定位来确定的。
- el-scrollbar组件的内部封装了这样一个div
-
注意:
- 为
el-scrollbar
的父级块div.main
设置高度。 - 为
el-scrollbar
设置宽高,这样显示区域的大小就确定了。渲染出来的div.el-scrollbar默认会overflow:hidden属性,因此内部多余的部分会被隐藏掉(主要是用来隐藏div.el-scrollbar__wrap的原生滚动条的)。 - 在设置
div.el-scrollbar__wrap
的样式时前面必须加上/deep/
。/deep/是>>>深度选择器的别名。之所以要用上/deep/才能覆盖UI组件内部样式,是因为vue中用了scoped属性,导致当前vue文件里的style仅仅作用于当前组件的元素,而对部分element UI的组件无效。 - 我们写在el-scrollbar中的内容实际上被渲染到
div.el-scrollbar__wrap
中,所以当我们给div.el-scrollbar__wrap
设置了overflow属性为scroll时,el-srollbar身上会产生原生的滚动条。- 原生竖直滚动条:由于
div.el-scrollbar__wrap
身上默认会添加margin-right:15px的属性,所以在div.el-scrollbar__wrap
没有设置宽度的时候,它的宽度会向右增加15px,所以竖直方向的滚动条就被挤出去,隐藏掉了。 - 原生水平滚动条:原生水平的滚动条无法通过margin-bottom为负值来把它挤出可视区,因为无论
div.el-scrollbar__wrap
是否设置了高度,margin-bottom都不会影响自身的高度和定位。只有通过将div.el-scrollbar__wrap
的高度设置来略大于div.el-scrollbar,才能隐藏掉水平滚动条。
- 原生竖直滚动条:由于
- 为
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)