Solid 的 OverlayScrollbars

这是官方的 OverlayScrollbars Solid 包装器。

安装

npm install overlayscrollbars-solid

同级依赖

Solid 的 OverlayScrollbars 有以下同级依赖：

• 原生 JavaScript 库：overlayscrollbars

npm install overlayscrollbars

• Solid 框架：solid-js

npm install solid-js

使用方法

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

import "overlayscrollbars/overlayscrollbars.css";

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

组件

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

import { OverlayScrollbarsComponent } from "overlayscrollbars-solid";

// ...

<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
/>

Ref

OverlayScrollbarsComponent 的 ref 将为你提供一个对象，通过它你可以访问 OverlayScrollbars 的 实例 和组件的根 元素。
ref 对象有两个属性：

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

// 示例用法
import type { OverlayScrollbarsComponentRef } from "overlayscrollbars-solid";

const Component = () => {
  let ref: OverlayScrollbarsComponentRef | undefined;

  return <OverlayScrollbarsComponent ref={(r) => (ref = r)} />;
};

原语

如果 OverlayScrollbarsComponent 不够用，你也可以使用 createOverlayScrollbars 原语：

import { createOverlayScrollbars } from "overlayscrollbars-solid";

// 示例用法
const Component = () => {
  let div;
  const [params, setParams] = createStore({ options, events, defer });
  const [initialize, instance] = createOverlayScrollbars(params);

  /**
   * 或者：
   *
   * const [params, setParams] = createSignal({});
   * const [initialize, instance] = createOverlayScrollbars(params);
   *
   * 或者：
   *
   * const [options, setOptions] = createSignal();
   * const [events, setEvents] = createSignal();
   * const [defer, setDefer] = createSignal();
   * const [initialize, instance] = createOverlayScrollbars({
   *   options,
   *   events,
   *   defer,
   * });
   *
   */

  onMount(() => {
    initialize({ target: div });
  });

  return <div ref={div} />;
};

该原语用于高级用法，允许你控制整个初始化过程。如果你想将其与其他插件集成，这将非常有用。

参数

参数是可选的，类似于 OverlayScrollbarsComponent。 它是一个具有可选属性的 object：

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

注意：该对象可以是普通对象、store 或 signal 对象。这也适用于所有字段。

返回值

createOverlayScrollbars 原语返回一个包含两个值的 tuple：

• 第一个值是 initialization 函数，它接受一个参数，即 InitializationTarget。
• 第二个值是一个函数，返回当前的 OverlayScrollbars 实例或未初始化时返回 null。

许可证

MIT