Angular 的 OverlayScrollbars

这是官方的 OverlayScrollbars Angular 包装器。

安装

npm install overlayscrollbars-ngx

对等依赖

Angular 的 OverlayScrollbars 有以下对等依赖：

• 原生 JavaScript 库：overlayscrollbars

npm install overlayscrollbars

• Angular 框架： @angular/core 和 @angular/common

npm install @angular/core @angular/common

使用方法

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

import "overlayscrollbars/overlayscrollbars.css";

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

模块可以这样导入：

import { NgModule } from "@angular/core";
import { OverlayscrollbarsModule } from "overlayscrollbars-ngx";

@NgModule({
  imports: [OverlayscrollbarsModule],
})
export class AppModule {}

组件

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

import { OverlayScrollbarsComponent } from "overlayscrollbars-ngx";

该组件可以使用两种不同的选择器：

<overlay-scrollbars [defer]="true"> 标签不重要 </overlay-scrollbars>

<section overlay-scrollbars [defer]="true">选择标签</section>

属性

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

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

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

<!-- 示例用法 -->
<overlay-scrollbars
  [options]="{ scrollbars: { autoHide: 'scroll' } }"
  [events]="{ scroll: () => { /* ... */ } }"
  [defer]="true"
></overlay-scrollbars>

事件

除了 events 属性，OverlayScrollbarsComponent 还会触发“原生” Angular 事件。为了防止与 DOM 事件名称冲突，这些事件有一个 os 前缀。

注意：无论你使用 events 属性还是 Angular 事件，或者两者都用，都没有关系。

<!-- 示例用法 -->
<div
  overlay-scrollbars
  (osInitialized)="onInitialized"
  (osUpdated)="onUpdated"
  (osDestroyed)="onDestroyed"
  (osScroll)="onScroll"
></div>

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

import type { EventListenerArgs } from "overlayscrollbars";

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

引用

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

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

指令

如果 OverlayScrollbarsComponent 不够用，你还可以使用 OverlayScrollbarsDirective 指令：

import { OverlayScrollbarsDirective } from "overlayscrollbars-ngx";

<!-- 示例用法 -->
<div overlayScrollbars></div>

该指令用于高级用法，让你可以控制整个初始化过程。如果你想将其与其他插件集成，这很有用。

注意：该指令不会自行初始化 OverlayScrollbars。你必须调用 initialize 函数。

属性

属性是可选的，与 OverlayScrollbarsComponent 类似。

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

实例

OverlayScrollbarsDirective 暴露了两个函数：

• osInitialize 接受一个参数，即 InitializationTarget。
• osInstance 返回当前的 OverlayScrollbars 实例，如果未初始化则返回 null。

许可证

MIT