Svelte 的 OverlayScrollbars

这是官方的 OverlayScrollbars Svelte 包装器。

安装

npm install overlayscrollbars-svelte

同级依赖

Svelte 的 OverlayScrollbars 有以下同级依赖：

• 原生 JavaScript 库：overlayscrollbars

npm install overlayscrollbars

• Svelte 框架：svelte

npm install svelte

使用方法

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

import "overlayscrollbars/overlayscrollbars.css";

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

组件

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

import { OverlayScrollbarsComponent } from "overlayscrollbars-svelte";

// ...

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

属性

该组件接受所有常规元素如 div 和 span 的属性。 此外，它还有自定义的可选属性：

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

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

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

事件

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

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

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

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

import type { EventListenerArgs } from "overlayscrollbars";

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

Ref

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

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

许可证

MIT