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

开始 • 妇女 文档 • 妇女 文件问题 • 妇女 有问题或想法吗?

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

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

安装

# npm
npm install @frsource/light-scrollbar

# Yarn
yarn add @frsource/light-scrollbar

# Pnpm
pnpm add @frsource/light-scrollbar

现代JS/Typescript

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

UMD 图像

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

铁路(可选)

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

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数字 :

.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 页面存档备份,存于互联网档案馆

• 开始
• API 参考

演示实例

检查我们的例子看看它是如何工作的!

问 题

不要犹豫 讨论委员会来啊!

更改日志

每一版本的更改记录在 发布注释 财务报告和审定财务报表 变换GELOG 文件。 。 。 .

贡献

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

许可证

麻省理工学院

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