Angular CDKScrollable not firing

Question

I cant seem to get the angular CdkScrollable to fire when creating my own div:

<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

yurzui · Accepted Answer · 2020-07-29T08:51:15.893

2

Angular directive's selector is case-sensitive, meaning you should use cdkScrollable instead of CdkScrollable.

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

Forked Stackblitz

edited Jul 29 '20 at 08:51

answered Jul 28 '20 at 18:14

yurzui

171,085
24
365
354

Thanks mate.. appericate your help! worked. Maybe you know why, but for some reason i get an error when the body has a scroll. If you shrink the window and another scroll appears. if you use that it causes an error to appear. I dont have the cdkScrollable on the body though. – Sukh_Bains Jul 29 '20 at 08:41
There is a global listener for `window.scroll` event which doesn't pass data to subscriber – yurzui Jul 29 '20 at 08:49
thanks Yurzui, how would you go about attaching to the cdkScrollable.. I have a got a fix, but seems hacky if(data === undefined){ return; } – Sukh_Bains Jul 29 '20 at 09:07
Yes, you should filter it somehow: either use `if (!data) return` or `filter` rxjs operator like here https://stackblitz.com/edit/angular-9-material-starter-ddzy6r?file=src%2Fapp%2Fapp.component.ts – yurzui Jul 29 '20 at 09:13
Thanks Yurzui mate. Is there anyway with this cdkScrollable I can actually listen to the body? – Sukh_Bains Jul 29 '20 at 09:36
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/218818/discussion-between-sukh-bains-and-yurzui). – Sukh_Bains Jul 29 '20 at 12:27

Angular CDKScrollable not firing

1 Answers1