选项

您可以使用一组初始选项来初始化 OverlayScrollbars，这些选项可以随时使用 options 方法进行更改：

OverlayScrollbars(document.querySelector("#myElement"), {
  overflow: {
    x: "hidden",
  },
});

默认的选项包括：

const defaultOptions = {
  paddingAbsolute: false,
  showNativeOverlaidScrollbars: false,
  update: {
    elementEvents: [["img", "load"]],
    debounce: [0, 33],
    attributes: null,
    ignoreMutation: null,
  },
  overflow: {
    x: "scroll",
    y: "scroll",
  },
  scrollbars: {
    theme: "os-theme-dark",
    visibility: "auto",
    autoHide: "never",
    autoHideDelay: 1300,
    autoHideSuspend: false,
    dragScroll: true,
    clickScroll: false,
    pointers: ["mouse", "touch", "pen"],
  },
};

选项	类型	默认值	说明
`paddingAbsolute`	`boolean`	`false`	表示是否将内容的内边距设置为绝对值。
`showNativeOverlaidScrollbars`	`boolean`	`false`	表示是否应显示原生的叠加滚动条。
`update.elementEvents`	`Array<[string, string]>` \| `null`	`[['img', 'load']]`	这是一个由元组组成的数组，其中元组的第一个值是选择器，第二个值是事件名称。如果任何具有指定选择器的元素触发了任何指定的事件，插件将自行更新。默认值可解释为“如果任何 `img` 元素触发 `load` 事件，插件将更新自身”。防抖监控内容变更的 MutationObserver。如果传入一个元组，第一个值是超时时间，第二个值是最大等待时间。如果只传入一个数字，则只指定了超时时间，没有最大等待时间。如果为 null，则不进行防抖。有助于微调性能。
`update.debounce`	`[number, number]` \| `number` \| `null`	`[0, 33]`	注意：如果超时值使用了 `0`，则使用 `requestAnimationFrame` 而不是 `setTimeout` 来进行防抖处理。
`update.attributes`	`string[]` \| `null`	`null`	注意：即使此选项为 `null`，`MutationObserver` 总会观察一个基础属性数组。一个由 `MutationObserver` 应额外观察的针对内容的属性名组成的数组。
`update.ignoreMutation`	`(mutation) => any` \| `null`	`null`	一个接收 MutationRecord 作为参数的函数。如果该函数返回一个 truthy 值，则忽略该突变且插件不会更新。有助于微调性能。
`overflow.x`	`string`	`'scroll'`	注意：有效值为：'hidden', 'scroll', 'visible', 'visible-hidden', 和 'visible-scroll'。水平（x 轴）的溢出行为。
`overflow.y`	`string`	`'scroll'`	注意：有效值为：'hidden', 'scroll', 'visible', 'visible-hidden', 和 'visible-scroll'。垂直（y 轴）的溢出行为。
`scrollbars.theme`	`string` \| `null`	`'os-theme-dark'`	将指定的主题（类名）应用于滚动条。
`scrollbars.visibility`	`string`	`'auto'`	注意：有效值为：'visible', 'hidden', 和 'auto'。如果其滚动轴能够具有可滚动的溢出，则滚动条的可见性。（轴的可滚动溢出仅在溢出行为为'scroll'或'visible-scroll'时才可能）。
`scrollbars.autoHide`	`string`	`'never'`	注意：有效值为：'never', 'scroll', 'leave', 和 'move'。自动隐藏可见滚动条的可见性，在用户执行特定操作后。
`scrollbars.autoHideDelay`	`number`	`1300`	自动隐藏滚动条之前的时间延迟（以毫秒为单位）。
`scrollbars.autoHideSuspend`	`boolean`	`false`	暂停自动隐藏功能，直到首次执行滚动交互为止。此选项的默认值因向后兼容性原因设为`false`，但为了更好的可访问性建议设置为`true`。
`scrollbars.dragScroll`	`boolean`	`true`	指示是否可以通过拖动滚动条手柄来滚动。
`scrollbars.clickScroll`	`boolean`	`false`	注意：此选项需要 `ClickScrollPlugin` 才能生效。指示是否可以通过点击滚动条轨道来滚动。
`scrollbars.pointers`	`string[]` \| `null`	`['mouse', 'touch', 'pen']`	插件应响应的 `PointerTypes`（指针类型）。

TypeScript

// 定义一个OverlayScrollbars实例的选项类型。
type Options = {
  // 指定内边距是否应为绝对值。
  paddingAbsolute: boolean;
  // 指定是否显示原生滚动条。仅当原生滚动条被覆盖时有效。
  showNativeOverlaidScrollbars: boolean;
  // 自定义自动更新的行为。
  update: {
    /**
     * 来自具有给定选择器的元素的指定事件将触发更新。
     * 对于MutationObserver和ResizeObserver无法检测到的所有内容都非常有用，
     * 例如：图像的`load`事件或`transitionend`/`animationend`事件。
     */
    elementEvents: Array<[elementSelector: string, eventNames: string]> | null;
    /**
     * 用于检测内容变化的防抖设置。
     * 如果提供了一个元组，可以自定义`timeout`（超时时间）和`maxWait`（最大等待时间），单位为毫秒。
     * 如果是一个单一数字，则只自定义`timeout`。
     *
     * 如果`timeout`为`0`，仍然存在防抖。（它通过`requestAnimationFrame`执行）。
     */
    debounce: [timeout: number, maxWait: number] | number | null;
    /**
     * 如果这些HTML属性发生变化，将触发更新。
     * 基本属性如`id`、`class`、`style`等始终被观察，无需显式添加。
     */
    attributes: string[] | null;
    // 一个函数，允许忽略内容突变，或者如果什么都不忽略则为null。
    ignoreMutation: ((mutation: MutationRecord) => any) | null;
  };
  // 按轴自定义溢出行为。
  overflow: {
    // 水平（x轴）的溢出行为。
    x: OverflowBehavior;
    // 垂直（y轴）的溢出行为。
    y: OverflowBehavior;
  };
  // 自定义滚动条的外观。
  scrollbars: {
    // 滚动条的主题。主题值将作为`class`添加到实例的所有`scrollbar`元素上。
    theme: string | null;
    // 滚动条的可见性行为。
    visibility: ScrollbarsVisibilityBehavior;
    // 滚动条的自动隐藏行为。
    autoHide: ScrollbarsAutoHideBehavior;
    // 滚动条自动隐藏的延迟时间，单位为毫秒。
    autoHideDelay: number;
    // 是否暂停滚动条自动隐藏行为，直到发生滚动。
    autoHideSuspend: boolean;
    // 是否可以通过拖动滚动条的把手来滚动视口。
    dragScroll: boolean;
    // 是否可以通过点击滚动条的轨道来滚动视口。
    clickScroll: boolean;
    // 支持的指针类型数组。
    pointers: string[] | null;
  };
};

选项

TypeScript

在本文档中