Skip to content
OverlayScrollbarsSvelte

Svelte 的 OverlayScrollbars

这是官方的 OverlayScrollbars Svelte 包装器。

安装

sh
npm install overlayscrollbars-svelte

同级依赖

Svelte 的 OverlayScrollbars 有以下同级依赖

npm install overlayscrollbars
npm install svelte

使用方法

第一步是将 CSS 文件导入到您的应用中:

ts
import "overlayscrollbars/overlayscrollbars.css";

注意:如果路径 'overlayscrollbars/overlayscrollbars.css' 无法使用,请使用 'overlayscrollbars/styles/overlayscrollbars.css' 作为 CSS 文件的导入路径。

组件

主要的入口点是 OverlayScrollbarsComponent,可以在您的应用中作为组件使用:

jsx
import { OverlayScrollbarsComponent } from "overlayscrollbars-svelte";

// ...

<OverlayScrollbarsComponent defer>示例内容</OverlayScrollbarsComponent>;

属性

该组件接受所有常规元素如 divspan 的属性。 此外,它还有自定义的可选属性:

  • element:接受一个 string,表示根元素的标签。
  • options:接受一个 object,表示 OverlayScrollbars 的选项。
  • events:接受一个 object,表示 OverlayScrollbars 的事件。
  • defer:接受一个 booleanobject。将初始化推迟到浏览器空闲时。

注意:强烈建议在可能的情况下使用 defer 选项,将初始化推迟到浏览器的空闲期。

jsx
// 示例用法
<OverlayScrollbarsComponent
  element="span"
  options={{ scrollbars: { autoHide: "scroll" } }}
  events={{
    scroll: () => {
      /* ... */
    },
  }}
  defer
/>

事件

除了 events 属性外,OverlayScrollbarsComponent 还会发出 "原生" 的 Svelte 事件。为了防止与 DOM 事件名称冲突,这些事件有一个 os 前缀。

注意:无论您使用 events 属性还是 Svelte 事件,或者两者都用,都是可以的。

jsx
// 示例用法
<OverlayScrollbarsComponent
  on:osInitialized={onInitialized}
  on:osUpdated={onUpdated}
  on:osDestroyed={onDestroyed}
  on:osScroll={onScroll}
/>

所有事件都是类型化的,但您可以在需要时使用 EventListenerArgs 类型作为工具:

ts
import type { EventListenerArgs } from "overlayscrollbars";

// 示例监听器
const onUpdated = (event) => {
  const [instance, onUpdatedArgs] =
    event.detail as EventListenerArgs["updated"];
};

Ref

OverlayScrollbarsComponentref 将为您提供一个对象,您可以通过该对象访问 OverlayScrollbars 的 instance 和组件的根 element。 ref 对象有两个属性:

  • osInstance:一个返回 OverlayScrollbars 实例的函数。
  • getElement:一个返回根元素的函数。

许可证

MIT