如何使用angular 4在perfect-scrollbar中启用自动滚动？

Question

文档在这里不是很有帮助。我想在我的应用程序中使用完美的滚动条，这样我就可以绕过与所有浏览器兼容的问题。我完全按照这里描述的https://github.com/zefoy/ngx-perfect-scrollbar/tree/4.x.x/初始化了我的代码。这就是我在html中做的事情。

<perfect-scrollbar id="chat" [config]="config"> <li *ngFor="let message of messages"> {{messages}} <li> </perfect-scrollbar>

现在，对于每个新消息，我希望容器自动滚动到最新的消息。进一步阅读文档，我发现有调用事件的指令。这在我之前链接的文档的末尾进行了描述。因此，我的方法在相同的组件中如下所示：

import {PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
...

constructor(private scrollbar:PerfectScrollbarComponent) { }
...

  ngDoCheck() {
    var chat = document.getElementById('chat');
    this.scrollbar.directiveRef.scrollToBottom(chat.scrollHeight);
  }

这给了我一个错误，因为它期望PerfectScrollbarComponent是一个提供者。这样做之后，我得到了另一个错误: No provider for ElementRef！。

我为此而失眠。有没有人能建议一下如何在angular 4中用suggest滚动条实现自动滚动？提前谢谢你

Answer 1

我也花了很多时间来解决这个问题，如下所示：

HTML：

<perfect-scrollbar class="window__list">
  ...
</perfect-scrollbar>

组件：

...
import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';

export class ChatWindowComponent implements OnInit {
   ...
   // Linking to component that using perfect-scrollbar
   @ViewChild(PerfectScrollbarComponent) public directiveScroll: PerfectScrollbarComponent;
   ...
   constructor() { }
   ...
   toBottom(): void {
     if (isUndefined(this.directiveScroll)) return;
     this.directiveScroll.directiveRef.scrollToBottom(0, 100)
  }
}

Answer 2

顾名思义，PerfectScrollbarComponent是一个组件，因此您需要使用@ViewChild获取对它的引用，而不是注入它

@ViewChild(PerfectScrollbarComponent)
scrollbar?: PerfectScrollbarComponent;

假设最新的消息出现在列表的底部，您可以使用directiveRef上提供的scrollToBottom方法

this.scrollbar.directiveRef.scrollToBottom(0, 500);  // 500ms is the speed

Answer 3

我已经修复了如下

scrollUp(): void {
  const container = document.querySelector('.main-panel');
  container.scrollTop = 0;
}