初始化

您可以直接通过元素或借助一个对象来初始化，使用对象可以让您对初始化过程有更多控制权。

// simple initialization with an element
const osInstance = OverlayScrollbars(document.querySelector("#myElement"), {});

解决初始化闪烁问题

如果初始化 OverlayScrollbars，它需要几毫秒时间来创建并把所有元素附加到 DOM 上。在这段时间内，原生滚动条仍然可见，并且在初始化完成后会被替换掉。这通常被视为闪烁现象。

为了解决这个问题，可以在目标元素（以及当目标元素是 body 时的 html 元素）上应用 data-overlayscrollbars-initialize 属性。

<!-- for the body element -->
<html data-overlayscrollbars-initialize>
  <head></head>
  <body data-overlayscrollbars-initialize></body>
</html>

<!-- for all other elements -->
<div data-overlayscrollbars-initialize>
  OverlayScrollbars is applied to this div
</div>

使用对象进行初始化

唯一必需的字段是 target 字段，这是插件将被应用的目标元素。

如果你仅使用带有 target 字段的对象初始化，其效果等同于元素初始化：

// Both initializations have the same outcome

OverlayScrollbars(document.querySelector("#myElement"), {});
OverlayScrollbars({ target: document.querySelector("#myElement") }, {});

在初始化对象中，你可以指定库如何处理生成的元素。例如，你可以指定一个已存在的元素作为视口元素。这样，库将不会生成新的元素，而是使用你指定的元素：

OverlayScrollbars(
  {
    target: document.querySelector("#target"),
    elements: {
      viewport: document.querySelector("#viewport"),
    },
  },
  {}
);

这对于已有固定 DOM 结构，并且不希望 OverlayScrollbars 生成自己元素的场景非常有用。当想要与其他库一起使用 OverlayScrollbars 时，这类情况经常出现。

你也可以决定滚动条应该应用于哪个元素：

OverlayScrollbars(
  {
    target: document.querySelector("#target"),
    scrollbars: {
      slot: document.querySelector("#target").parentElement,
    },
  },
  {}
);

最后，你还可以决定何时应取消初始化：

OverlayScrollbars(
  {
    target: document.querySelector("#target"),
    cancel: {
      nativeScrollbarsOverlaid: true,
      body: null,
    },
  },
  {}
);

在上述示例中，当原生滚动条被覆盖，或者你的目标元素是 body 且插件判定对 body 元素的初始化会影响像 window.scrollTo 这样的原生功能时，初始化会被取消。

初始化

解决初始化闪烁问题

使用对象进行初始化

在本文档中