实例

OverlayScrollbars 实例是通过调用 OverlayScrollbars 函数并传入一个元素和选项对象来创建的。

const osInstance = OverlayScrollbars(document.body, {});

实例方法

Typescript

// OverlayScrollbars TypeScript接口的简化版本。
interface OverlayScrollbars {
  // 获取实例当前的选项设置。
  options(): Options;
  // 设置实例的当前选项，可选参数pure控制是否纯净更新。
  options(newOptions: PartialOptions, pure?: boolean): Options;

  // 向实例添加事件监听器。
  on(eventListeners: EventListeners, pure?: boolean): () => void;
  // 向实例添加单个事件监听器。
  on<N extends keyof EventListenerArgs>(
    name: N,
    listener: EventListener<N>
  ): () => void;
  // 向实例添加多个事件监听器。
  on<N extends keyof EventListenerArgs>(
    name: N,
    listener: EventListener<N>[]
  ): () => void;

  // 从实例中移除单个事件监听器。
  off<N extends keyof EventListenerArgs>(
    name: N,
    listener: EventListener<N>
  ): void;
  // 从实例中移除多个事件监听器。
  off<N extends keyof EventListenerArgs>(
    name: N,
    listener: EventListener<N>[]
  ): void;

  // 更新实例状态。
  update(force?: boolean): boolean;

  // 获取实例的状态信息。
  state(): State;

  // 获取实例所管理的元素集合。
  elements(): Elements;

  // 销毁实例并移除所有已添加的元素。
  destroy(): void;

  // 获取传入插件的实例模块。
  plugin<P extends InstancePlugin>(
    osPlugin: P
  ): InferInstancePluginModuleInstance<P> | undefined;
}

// 描述OverlayScrollbars实例的状态信息。
interface State {
  // 当前填充（padding）的像素值。
  padding: TRBL;
  // 填充是否为绝对值。
  paddingAbsolute: boolean;
  // 视口的宽度和高度（以像素为单位）。
  overflowEdge: XY<number>;
  // 溢出量（以像素为单位）。
  overflowAmount: XY<number>;
  // 视口的CSS溢出样式。
  overflowStyle: XY<OverflowStyle>;
  // 视口是否有溢出。
  hasOverflow: XY<boolean>;
  // 视口滚动坐标信息。
  scrollCoordinates: {
    // 每个轴的起始（原点）滚动坐标。
    start: XY<number>;
    // 每个轴的结束滚动坐标。
    end: XY<number>;
  };
  // 方向是否被认为是从右至左（RTL）。
  directionRTL: boolean;
  // 实例是否已被销毁。
  destroyed: boolean;
}

// 描述OverlayScrollbars实例包含的各个元素。
interface Elements {
  // 实例应用于的目标元素。
  target: HTMLElement;
  // 宿主元素，是所有其他元素的根。
  host: HTMLElement;
  // 负责应用正确内边距的元素，根据初始化可能与视口元素相同。
  padding: HTMLElement;
  // 负责执行滚动操作的元素。
  viewport: HTMLElement;
  // 用于承载内容的元素，根据初始化可能与视口元素相同。
  content: HTMLElement;
  // 可以获取当前`scrollLeft`或`scrollTop`偏移量的元素，根据目标元素可能与视口元素相同。
  scrollOffsetElement: HTMLElement;
  // 可以添加`scroll`事件的元素，根据目标元素可能与视口元素相同。
  scrollEventElement: HTMLElement | Document;
  // 水平滚动条元素集合。
  scrollbarHorizontal: CloneableScrollbarElements;
  // 垂直滚动条元素集合。
  scrollbarVertical: CloneableScrollbarElements;
}