前端自定义滚动条新星库出现了，看它亮还是不亮

23朵毒蘑菇
0 阅读3分钟

告别原生滚动条：一个不到 10KB 的轻量级自定义滚动条插件

原生滚动条太丑？第三方组件太臃肿？试试这个轻量到极致的方案。

前端开发中，自定义滚动条是一个绕不开的话题。浏览器原生滚动条不仅样式简陋，在不同系统下表现也不一致。而市面上的 UI 框架往往捆绑着庞大的依赖，为了美化一个滚动条引入整个组件库，怎么想都不划算。

dumogu-scrollbar 正是为解决这个痛点而生 —— 压缩后不到 10KB，零依赖，TypeScript 原生支持。

为什么值得关注？

1. 极致轻量，零依赖

整个插件压缩后不到 10KB，不依赖任何第三方库。源码不到 800 行 TypeScript，结构清晰，感兴趣的话花一杯咖啡的时间就能读完。

2. 覆盖层设计，不侵入 DOM

这是它和其他滚动条插件最大的区别。dumogu-scrollbar 采用绝对定位覆盖层（overlay）的方式渲染滚动条，不包裹、不修改你的滚动容器。这意味着：

  • 原有 DOM 结构完全不受影响
  • 不会触发任何基于 DOM 结构的样式破坏
  • 不会干扰已有的 overflow / scroll 行为
  • 你只管写业务代码，滚动条完全独立运作

3. 支持 ESM / CJS / UMD 三种模块格式

无论你用 Webpack、Vite、Rollup，还是直接 <script> 标签引入，都能无缝接入：

npm install dumogu-scrollbar

// ESM
import { DumoguScrollbar } from 'dumogu-scrollbar';
import 'dumogu-scrollbar/dist/dumogu-scrollbar.css';

<!-- 或者浏览器直接引入 -->
<link rel="stylesheet" href="dumogu-scrollbar/dist/dumogu-scrollbar.css" />
<script src="dumogu-scrollbar/dist/dumogu-scrollbar.umd.js"></script>

4. 独立导轨组件，灵活度拉满

除了开箱即用的 DumoguScrollbar（同时管理 X/Y 双轴滚动条），你还可以单独使用 DumoguScrollbarRail，把横向或纵向导轨放到页面任意位置，完全突破滚动容器的布局限制。

// 单独创建一个横向滚动条，放到任意容器中
const railX = new DumoguScrollbarRail({
    isX: true,
    keepShow: true,
});
document.querySelector('#custom-rail-wrapper').appendChild(railX.railEl);
railX.bind(document.querySelector('#my-scroll-area'));

每个导轨实例完全独立，你可以混搭「常驻显示」和「悬停显示」两种模式。

5. 高度可定制的样式

所有内部元素都暴露了语义化的 CSS 类名（如 .dumogu-scrollbar-rail_x、.dumogu-scrollbar-rail_thumb_y），只需在根元素上加一个自定义类名，就能轻松覆盖样式：

.my-theme .dumogu-scrollbar-rail_y {
    width: 8px;
    right: initial;
    left: -14px;  /* 把滚动条移到容器左侧 */
}
.my-theme .dumogu-scrollbar-rail_thumb_y {
    border-radius: 999px;
    background: linear-gradient(to top, #e14fad 0%, #f9d423 100%);
}

6. TypeScript 类型完备

类型定义文件随包发布，ScrollbarOption 和 RailOption 类型也已导出，写 TS 项目毫无压力。

快速上手

三步搞定一个自定义滚动条：

import 'dumogu-scrollbar/dist/dumogu-scrollbar.css';
import { DumoguScrollbar } from 'dumogu-scrollbar';

// 1. 创建实例
const ds = new DumoguScrollbar({ keepShow: false });

// 2. 绑定到滚动容器
ds.bind(document.querySelector('#my-scroll-container'));

// 3. 挂载到 DOM（默认挂到 body）
ds.mount();

别忘了隐藏原生滚动条：

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

进阶：多实例管理

页面有多个滚动区域？一个 requestAnimationFrame 循环统一管理：

const instances = [ds1, ds2, ds3];

function updateLoop() {
    requestAnimationFrame(() => {
        instances.forEach(item => item.update());
        updateLoop();
    });
}
updateLoop();

拖拽过程中对应导轨会跳过 update()，避免拖拽和内容更新冲突，细节处理得很到位。

总结

对比维度原生滚动条UI 框架内置dumogu-scrollbar
样式自定义❌ 有限✅✅ 完全自由
包体积—几十到几百 KB< 10KB
依赖—全家桶零依赖
DOM 侵入—可能修改结构覆盖层，不侵入
独立导轨—❌✅
TypeScript—看框架✅ 类型完备

如果你正在做：

  • 后台管理系统的表格/列表美化
  • 品牌官网的视觉定制
  • 桌面端应用（Electron）的 UI 打磨
  • 任何需要「轻量、可控、不挑框架」的滚动条场景

dumogu-scrollbar 值得一试。

avatar
文章
阅读
粉丝