原生滚动条样式一言难尽
公司项目需要用到多表头等复杂的表格功能，一直使用 vxe-table 并在其基础上定制开发。但相比 Element Plus 的表格，它有一个对界面来说很不友好的缺陷：不能自定义滚动条。使用原生滚动条会使表格右侧多出一块空白的区域，令人难受。
年前，我们要在一个新系统中画甘特图，用到了在 Github 极其流行的 vue-gantt-elastic。并不出乎意料，这玩意儿也不支持自定义滚动条。
也许大家没见过 Windows 的滚动条样式是到底有多么出戏。这里截张图给大家感受一下。
CodePen
CSS 滚动条相关的规范如 CSS Scrollbars Styling Module 所规范的功能不多，甚至可以说太弱了。它只描述了一些用来简单处理滚动条样式的属性vue滚动条，如宽度和颜色。考虑到 PC 端用户使用鼠标，给滚动条加上动画或鼠标交互也是完全合情合理的需求，所以依赖 CSS 滚动条规范完全不够用。
但大佬对原生滚动条样式不满意，前端怎么能说不行呢，改！（不是手痒痒了）
寻找简单的解决方案
要把基础库依赖的 vxe-table 直接替换为 Element Plus 表格很不现实。在没做过表格调研的情况下就迁移基础组件是不可接受的，何况我们只想改个滚动条样式。
这是 ElTable 的示例。看着这漂亮的滚动条当时真是心痒痒呀！
element-plus table
讲到 Element Plus，能不能用 ElScrollbar 组件做点什么呢？
答案是否定的，因为 ElScrollbar 只能处理简单的滚动系统。
如图所示，假设 ElScrollbar 组件 S 本身高 400px，其直接子元素 Children 高 1000px。这个场景足够简单，所以能轻易获取 S 的滚动余量有 600px。
Simple Scrollbar System
当组件有复杂的层级嵌套时，ElScrollbar 组件就不知道你要使用哪一个元素去计算滚动余量了。如图所示，在复杂情况下，ElScrollbar 的虚拟滚动条甚至会和原生滚动条出现冲突的情况。
Complex Scrollbar SystemUse Scrollbars 的诞生
这段时间想了许多方法，也试了不少开源轮子，它们都不能满足我“一键替换” vxe-table 及 vue-gantt-elastic 滚动条样式的需求。所以我找时间把温习了一下浏览器滚动系统相关知识，并把需求精简后，封装出顺手的工具，use-scrollbars
use-scrollbars 有以下几个特点：
它支持定制复杂组件的滚动条样式
它能提供比原生滚动条更丰富的样式、动画和交互效果
它使用原生滚动事件而不是 CSS Transform 等低性能滚动方案
它的状态是响应式的且有完整的类型提示
第一点，也就是我的需求，use-scrollbars 能修改 vxe-table 等复杂组件的滚动条，这是 ElScrollbar 等其它开源组件目前无法实现的功能。第二点和第三点意味着更低的代码复杂度。第四点是说 use-scrollbars 是用 TypeSript 实现的 Vue Hook…
使用示例
对于简单的滚动系统，use-scrollbars 能做到 API 足够简单。
long content long content ...
long content long content ...
long content long content ...
import { onMounted, ref } from 'vue'
import { useSrollbar } from 'use-scrollbars'
const elemRef = ref(null);
const barStates = useScrollbar(elemRef);
native VS. use-scrollbars (theme css-tricks)
那怎么使用 use-scrollbars 修改复杂的组件比如 vxe-table 呢？
代码虽然没有大家想象的那么短，但一定是可以理解的。
第一步，使用 devtools 确认滚动系统，并在代码中将相关元素选取出来。
const $table = tableRef.value.$el;
const $header = $table.querySelector(".vxe-table--header-wrapper");
const $bodyWrapper = $table.querySelector(".vxe-table--body-wrapper");
const $bodyContent = $table.querySelector(".vxe-table--body");
const $bodyXSpace = $table.querySelector(".vxe-body--x-space");
const $bodyYSpace = $table.querySelector(".vxe-body--y-space");
第二步，通过 use-scrollbars 初始化这些滚动系统。
const barStates = useScrollbar();
barStates.init({
mount: tableRef,
content: [$bodyWrapper, $bodyContent, $bodyXSpace, $bodyYSpace],
viewport: [$bodyWrapper]
});
第三步vue滚动条，调整样式，适配虚拟滚动条。
.vxe-table--body-wrapper::-webkit-scrollbar {
width: 0;
height: 0;
}
// ... and more
最后，这是效果对比。
如果你是 vxe-table 用户，在这里可以找到我写的示例组件，直接拷贝到项目中使用，普通表格和虚拟滚动的表格都支持。如果大家对使用 use-scrollbars 定制其它组件的滚动条有其它疑问，欢迎留言，我会逐一解答。
另，use-scrollbars 欢迎 Start & PR！
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： muyang-0410
