基于Vue3定制复杂组件滚动条的实现

⛸️ 怎样定制复杂组件的自定义滚动条？

原生滚动条样式一言难尽

公司项目需要用到多表头等复杂的表格功能，一直使用 vxe-table 并在其基础上定制开发。但相比 Element Plus 的表格，它有一个对界面来说很不友好的缺陷：不能自定义滚动条。使用原生滚动条会使表格右侧多出一块空白的区域，令人难受。

年前，我们要在一个新系统中画甘特图，用到了在 Github 极其流行的 vue-gantt-elastic。并不出乎意料，这玩意儿也不支持自定义滚动条。

也许大家没见过 Windows 的滚动条样式是到底有多么出戏。这里截张图给大家感受一下。

CSS 滚动条相关的规范如 CSS Scrollbars Styling Module 所规范的功能不多，甚至可以说太弱了。它只描述了一些用来简单处理滚动条样式的属性，如宽度和颜色。考虑到 PC 端用户使用鼠标，给滚动条加上动画或鼠标交互也是完全合情合理的需求，所以依赖 CSS 滚动条规范完全不够用。

但大佬对原生滚动条样式不满意，前端怎么能说不行呢，改！（不是手痒痒了）

寻找简单的解决方案

要把基础库依赖的 vxe-table 直接替换为 Element Plus 表格很不现实。在没做过表格调研的情况下就迁移基础组件是不可接受的，何况我们只想改个滚动条样式。

这是 ElTable 的示例。看着这漂亮的滚动条当时真是心痒痒呀！

讲到 Element Plus，能不能用 ElScrollbar 组件做点什么呢？

答案是否定的，因为 ElScrollbar 只能处理简单的滚动系统。

如图所示，假设 ElScrollbar 组件 S 本身高 400px，其直接子元素 Children 高 1000px。这个场景足够简单，所以能轻易获取 S 的滚动余量有 600px。

当组件有复杂的层级嵌套时，ElScrollbar 组件就不知道你要使用哪一个元素去计算滚动余量了。如图所示，在复杂情况下，ElScrollbar 的虚拟滚动条甚至会和原生滚动条出现冲突的情况。

Use 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 足够简单。

<template>
  <div ref="elemRef">
    long content long content ...
    long content long content ...
    long content long content ...
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useSrollbar } from 'use-scrollbars'

const elemRef = ref(null);
const barStates = useScrollbar(elemRef);
</script>

那怎么使用 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]
});

第三步，调整样式，适配虚拟滚动条。

.vxe-table--body-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}
// ... and more

最后，这是效果对比。

到此这篇关于基于Vue3定制复杂组件滚动条的实现的文章就介绍到这了,更多相关Vue3组件滚动条内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！