滚动条 插件

无限画布滚动条，按需显示横向、竖向滚动条，支持切换黑白主题或自定义样式。

适用平台

支持所有平台。

安装插件

需要安装 scroll 插件才能使用，点此访问 Github 仓库。

npm

npm install @leafer-in/scroll

pnpm

pnpm add @leafer-in/scroll

yarn

yarn add @leafer-in/scroll

bun

bun add @leafer-in/scroll

通过 script 标签引入

通过全局变量 LeaferIN.scroll 访问插件内部功能。

scroll.min

<script src="https://unpkg.com/@leafer-in/scroll@1.0.9/dist/scroll.min.js"></script>
<script>
  const { ScrollBar } = LeaferIN.scroll
</script>

scroll

<script src="https://unpkg.com/@leafer-in/scroll@1.0.9/dist/scroll.js"></script>
<script>
  const { ScrollBar } = LeaferIN.scroll
</script>

https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm

体验

import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import { ScrollBar } from '@leafer-in/scroll'

const app = new App({ view: window, editor: {} })

new ScrollBar(app)  // = app.sky.add(new ScrollBar(app.tree))

app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 100))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 2400))

下一步

ScrollBar 元素