javascript - Angular CDKScrollable 未触发

Question

创建我自己的 div 时，我似乎无法触发有角度的 CdkScrollable：

<div class="main-section" id="mainsection" #mainsection CdkScrollable>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px; "></div>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>

</div>

#mainsection {
    height: 400px;
    display: block;
    overflow-y: auto;
}
private onWindowScroll(data: CdkScrollable) {

    const scrollTop = data.getElementRef().nativeElement.scrollTop || 0;
     console.log(scrollTop);
    if (this.lastOffset > scrollTop) {
      console.log('Show toolbar');
    } else if (scrollTop < 10) {
      console.log('Show toolbar');
    } else if (scrollTop > 100) {
      console.log('Hide toolbar');
    }
    this.lastOffset = scrollTop;
  }
ngAfterViewInit() {
console.log('hiiii');
 this.scrollingSubscription = this.scroll
          .scrolled()
          .subscribe((data: CdkScrollable) => {
         
            this.onWindowScroll(data);
          });
  }

https://stackblitz.com/edit/angular-9-material-starter-ykpx6o?file=src%2Fapp%2Fapp.component.ts

标签： javascriptangularangular-cdk-virtual-scroll

Answer 1

Angular 指令的选择器区分大小写，这意味着您应该使用c dkScrollable 而不是C dkScrollable。

<div class="main-section" id="mainsection" cdkScrollable>
                                          ^^^^^

分叉的 Stackblitz