element-ui中隐藏组件el-scrollbar的使用

element-ui中隐藏组件el-scrollbar的使用

一、使用

虽然官网没有介绍该组件，但是网上有许多小伙伴扒了源码并提供了使用方法

view-class=""

wrap-class=""

tag="">

属性

props: {

native: Boolean, // 是否使用本原生滚动条，设为true则不会启用element-ui自定义的滚动条

wrapStyle: {}, // 包裹层自定义样式

wrapClass: {}, // 包裹层自定义样式类

viewClass: {}, // 视图层部分自定义样式类

viewStyle: {}, // 视图层部分自定义样式

noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能

tag: { // 生成的标签类型，默认使用 `div`标签包裹

type: String,

default: 'div'

}

}

二、Dom结构解析

el-scrollbar - 最外层容器

el-scrollbar__wrap - 包裹层，用于遮挡住原生滚动条(看margin属性就知道，负数)

el-scrollbar__view - 视图层，无大小限制，用于撑开包裹层

el-scrollbar__bar is-horizontal - 水平导轨

el-scrollbar__thumb - 内部滑块

el-scrollbar__bar is-vertical - 垂直导轨

el-scrollbar__thumb - 内部滑块

别人的一张图，很直观

三、样式优化

如果不做样式优化，你会发现原生水平滚动条会显示出来，并且与el-scrollbar的水平滚动条重叠

那么我们加上以下样式，这也是网上大多的解决方案

.el-scrollbar__wrap {

overflow-x: hidden;

}

// or

.el-scrollbar {

.el-scrollbar__wrap {

overflow-x: hidden;

.el-scrollbar__view {

}

}

}

原生水平滚动条确实消失了，但是你会发现由于其被隐藏导致无法使用快捷键“shift+鼠标滚轮”水平滚动了，这样体验就很差了，最终方案如下

// 使用el-scrollbar时，请加上此样式类

.my-scrollbar {

height: 100%;

width: 100%;

white-space: nowrap;

position: relative;

overflow: hidden;

.el-scrollbar__wrap {

// 横竖滚动条都直接显示出来，height加上17px把滚动条隐藏掉

// width已在el-scrollbar内部样式处理了

overflow: scroll; // 不能设置为overflow-x:hidden,滚动条会重叠

height: calc(100% + 17px);

&.el-scrollbar__wrap--hidden-default {

height: 100% !important;

}

&.el-scrollbar__view {

}

}

> .el-scrollbar__bar {

z-index: 1999;

&.is-horizontal {

}

&.is-vertical {

}

}

.el-scrollbar__thumb {

background: lightgray;

transition: background 0.4s;

}

.el-scrollbar__thumb:hover {

background: darkgray;

}

}

可以愉快的用快捷键滚动了

PS：在使用过程中发现有时候内层或外层容器变化时，滑块长度不正确(如window.resize事件)，是需要手动调用内部的update方法的.

这几篇文章剖析了如何实现自定义滚动条并且对el-scrollbar源码解析，有兴趣的可以看看

Element-ui el-scrollbar 源码解析

element ScrollBar滚动组件源码深入分析

element-ui中隐藏组件el-scrollbar的使用相关教程