element表格怎么才能有横向滚动条 elementui横向滚动条

转载

锦绣前程未央 2024-05-07 19:46:37

文章标签 element表格怎么才能有横向滚动条 elementui的横向滚动自定义样式滑块图层 文章分类 机器学习人工智能

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属性就知道，负数)

element表格怎么才能有横向滚动条 elementui横向滚动条_elementui的横向滚动

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

el-scrollbar__bar is-horizontal - 水平导轨

el-scrollbar__thumb - 内部滑块

el-scrollbar__bar is-vertical - 垂直导轨

el-scrollbar__thumb - 内部滑块

element表格怎么才能有横向滚动条 elementui横向滚动条_图层_02

别人的一张图，很直观

element表格怎么才能有横向滚动条 elementui横向滚动条_图层_03

三、样式优化

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

element表格怎么才能有横向滚动条 elementui横向滚动条_滑块_04

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

.el-scrollbar__wrap {
overflow-x: hidden;
}
// or
.el-scrollbar {
.el-scrollbar__wrap {
overflow-x: hidden;
.el-scrollbar__view {
}
}
}

element表格怎么才能有横向滚动条 elementui横向滚动条_滑块_05

原生水平滚动条确实消失了，但是你会发现由于其被隐藏导致无法使用快捷键“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;
}
}

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

element表格怎么才能有横向滚动条 elementui横向滚动条_图层_06