# @frsource/light-scrollbar 中文文档

规范地址：https://npmcn.com/package/%40frsource/light-scrollbar/

版本：1\.7\.0
npm 元数据更新时间：2026-11-12T09:56:54.775Z
中文译文更新时间：2026-11-15T15:24:08.715Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40frsource/light-scrollbar
原文对照：https://npmcn.com/package/%40frsource/light-scrollbar/?lang=original
项目主页：https://github.com/FRSOURCE/light-scrollbar/
源码仓库：https://github.com/FRSOURCE/light-scrollbar

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：240 kB，28 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18\.0\.0
- 运行依赖：1 个
- 首次发布：2022-03-16T10:07:05.917Z
- 最新版本发布：2026-11-12T09:56:54.023Z
- 近 30 天下载量：13245（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：316（近 12 个月 28 个）

## 中文简介

创建自定义滚动条的最小化插件 ! @%%

## 安装

```sh
npm install @frsource/light-scrollbar
```

也可以使用：`pnpm add @frsource/light-scrollbar`、`yarn add @frsource/light-scrollbar`、`bun add @frsource/light-scrollbar`

## README

 [![NPM version badge](https://img.shields.io/npm/v/@frsource/light-scrollbar)](https://www.npmjs.com/package/@frsource/light-scrollbar)[![Core bundle size badge. Data from bundlephobia.com](https://img.shields.io/bundlephobia/minzip/@frsource/light-scrollbar) ](https://bundlephobia.com/result?p=@frsource/light-scrollbar "Visit bundlephobia for more details!")[![changesets badge](https://img.shields.io/badge/maintained%20with-changesets-176de3.svg) ](https://github.com/changesets/changesets)[![Tree shaking supported](https://badgen.net/bundlephobia/tree-shaking/@frsource/light-scrollbar) ](https://bundlephobia.com/result?p=@frsource/light-scrollbar)[![license MIT badge](https://img.shields.io/github/license/FRSOURCE/light-scrollbar)](https://github.com/FRSOURCE/light-scrollbar/blob/master/LICENSE)

# 光滑条 - 创建自定义滚动条的最小化灯光插件 ! @%

[开始](https://npmcn.com/package/%40frsource/light-scrollbar/#readme-quick-start) • 妇女 [文档](https://www.frsource.org/light-scrollbar/) • 妇女 [文件问题](https://github.com/FRSOURCE/light-scrollbar/issues) • 妇女 [有问题或想法吗?](https://npmcn.com/package/%40frsource/light-scrollbar/#readme-questions)  

  
_轻而易举,可以创建自定义滚动条的小型库.  
便于移动的桌面( T)  
不重建滚动体验, 只是视觉代表浏览器滚动条  
装有小捆绑大小( 少于 2500B!) 的表演者( A)  
使用 " 滚动-行为:平滑 " 的可能性  
由JS ES5或现代浏览器单独捆绑出版 [微捆绑](https://www.npmjs.com/package/microbundle)  
完全写入 [类型标记](https://www.typescriptlang.org/)_  
原载 [麻省理工学院](https://opensource.org/licenses/MIT) 许可证  
  

[**https://www.frsource.org/light-scrollbar 页面存档备份,存于互联网档案馆**](https://www.frsource.org/light-scrollbar/)

### 安装

```bash
# npm
npm install @frsource/light-scrollbar

# Yarn
yarn add @frsource/light-scrollbar

# Pnpm
pnpm add @frsource/light-scrollbar
```

### 现代JS/Typescript

```ts
import { attach } from "@frsource/light-scrollbar";
const scrollingElement = document.querySelector("element-with-overflow-auto");
attach(scrollingElement);
```

### UMD 图像

```js
const scrollingElement = document.querySelector("element-with-overflow-auto");
window.lightScrollbar.attach(scrollingElement);
```

### 铁路(可选)

滚动条拇指下的背景音轨 。 这是一个单独的条目,所以它只有在您导入时才会被添加到捆绑中:

```ts
import { attach } from "@frsource/light-scrollbar";
import { rail } from "@frsource/light-scrollbar/rail";
import "@frsource/light-scrollbar/dist/rail.css";

// every `rail` value that is not set is taken from `bar`
attach(scrollingElement, { enableRail: true, plugins: [rail], rail: { y: { width: 10 } } });
```

装入 UMD `dist/rail.umd.js` 通过 `window.lightScrollbarRail.rail`。 。 。 .

### 样式

颜色和半径是包含在样式中的默认的 CSS 变量 - 在滚动栏元素上仅覆盖您想要修改的变量, 其任何父变量或 `:root`数字 :

```css
.my-scrollbar {
  --light-scrollbar-bar-background: #8b5cf6;
  --light-scrollbar-bar-background-active: #6d28d9;
  --light-scrollbar-bar-radius: 2px;
}
```

栏杆在上 栏杆和拇指在上 `--light-scrollbar-rail-background`, (中文(简体) ), `--light-scrollbar-rail-radius`, (中文(简体) ), `--light-scrollbar-rail-bar-background` 财务报告和审定财务报表 `--light-scrollbar-rail-bar-background-active`。 。 。 .

## 文档

博士们,请访问 [frsource.org/light-scrollbar 页面存档备份,存于互联网档案馆](https://www.frsource.org/light-scrollbar/)

-   [开始](https://www.frsource.org/light-scrollbar/instalation)
-   [API 参考](https://www.frsource.org/light-scrollbar/api/attach/arguments)

## 演示实例

[检查我们的例子看看它是如何工作的!](https://www.frsource.org/light-scrollbar/examples)

## 问 题

不要犹豫 [讨论委员会](https://github.com/FRSOURCE/light-scrollbar/discussions)来啊!

## 更改日志

每一版本的更改记录在 [发布注释](https://github.com/FRSOURCE/light-scrollbar/releases) 财务报告和审定财务报表 [变换GELOG 文件](https://github.com/FRSOURCE/light-scrollbar/tree/master/CHANGELOG.md)。 。 。 .

## 贡献

发展发生在文件,所以运行 `pnpm docs:dev` 它运行微波段和 vitepress docs. 测试可以在 Cypress 运行中完成 `pnpm cy` 运行微波段和cypress

## 许可证

[麻省理工学院](https://opensource.org/licenses/MIT)

版权(c) 2022年至今, Szymon Dziewoński, FRSFURCE

## 常见问题

### @frsource/light-scrollbar 是什么？

创建自定义滚动条的最小化插件 \! @%%

### 如何安装 @frsource/light-scrollbar？

在项目目录运行 npm install @frsource/light-scrollbar，或使用 pnpm add / yarn add / bun add。

### @frsource/light-scrollbar 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @frsource/light-scrollbar 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @frsource/light-scrollbar 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @frsource/light-scrollbar 可以商用吗？

@frsource/light-scrollbar 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @frsource/light-scrollbar 的下载量有多少？

根据 npm 官方下载统计，@frsource/light-scrollbar 在 2026/10/16 – 2026/11/14 这 30 天内被下载 13,245 次，日均约 442 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @frsource/light-scrollbar 还在维护吗？

最新版本 1\.7\.0 发布于 2026/11/12（3 天前）；至今共发布 316 个版本，其中过去 12 个月发布了 28 个；首次发布于 2022/03/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。