Question

早安社区，

我有一个Angular CLI项目，我正在尝试初始化NPM包smooth-scrollbar，但我似乎并不能解决我在这里做错了什么。

这是我的app.component.html

...
<scrollbar>
  <div class="main-container scroll-content" id="mainContainer" data-scrollbar>
    <router-outlet></router-outlet>
  </div>
  <div class="scrollbar-track scrollbar-track-y">
      <div class="scrollbar-thumb scrollbar-thumb-y"></div>
  </div>
</scrollbar>
...

我也尝试了

<div class="main-container scroll-content" id="mainContainer" data-scrollbar>
  <router-outlet></router-outlet>
</div>

我的.main-container风格是

.main-container, #mainContainer {
    width: 100%;
    height: calc(100% - 64px);
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    bottom: 0;
}

和我的app.component.ts

import { Component, EventEmitter, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import Scrollbar from 'smooth-scrollbar';
...
constructor(@Inject(DOCUMENT) private document: Document) {
  Scrollbar.init(document.getElementById('#mainContainer'));
}

我也试过

Scrollbar.init(document.querySelector('#mainContainer'));

和

Scrollbar.init(<HTMLElement>document.querySelector('#mainContainer'));

在我的所有尝试中，我收到以下TypeError

ERROR TypeError: expect element to be DOM Element, but got null
at Function.SmoothScrollbar.init (index.js:28)
...

我在这里缺少什么？谢谢你的回复

编辑：我通过初始化ngAfterViewInit中的滚动条而不是constructor（我在DOM加载之前初始化我的愚蠢部分）解决了当前问题，但现在我正面临着另一个问题：overscroll效果不会启用！

如下配置：

ngAfterViewInit() {
const scrollbar = Scrollbar.init(document.getElementById('mainContainer'), {
  plugins: {
    overscroll: true
  }
});
scrollbar.updatePluginOptions('overscroll', {
  effect: 'glow',
  damping: 0.14,
  maxOverscroll: 300,
  glowColor: '#222a2d'
});

}

Answer 1

构造函数中尚不存在组件模板。你必须等到角度创造它。将init逻辑移动到lifecycle hooks之一，例如：

constructor(@Inject(DOCUMENT) private document: Document) {
}

ngAfterViewInit() {
  Scrollbar.init(document.getElementById('#mainContainer'));
}

TypeScript smooth-scrollbar包

1 个答案: