CODEWITHSUNDEEP
javascripthtmlcssangularangular-material
Tamir Shklaz
Tamir Shklaz

Reputation: 317

Using Parent Scrollbar instead of Sub Component Scrollbar with Angular Virtual Scroll

Context

I'm using angular virtual scroll to display a long list of elements. My design is very simple and can be seen in the image below.

Desired Design

Current Behaviour

Currently, the virtual scroll has its own scrollbar which operates differently from the parent scroll bar. This makes it very tedious to scroll to the footer. i.e. When you scroll to the end of the list it does not scroll to the footer.

Desired Behaviour

I want the virtual scroll container to use the parent scroll bar instead of its own such that when the end of the list is reached, regular scrolling is resumed.

A Stackblitz can be found here illustrating the undesired behaviour: https://stackblitz.com/angular/aemdyrjmebn

Upvotes: 2

Views: 1950

Answers (1)

Drenai
Drenai

Reputation: 12357

This is default scrolling behavior native to the browser (I tried it on Chrome). For example the same thing will happen with the overflow: scroll example on MDN: after the container has been fully scrolled down, the scrolling of the parent/window will not begin until the mouse is moved. This is also what happens with Angular Virtual Scrolling

If there is another way to achieve what you're looking for you would need to do it when the virtual container has been scrolled to the bottom - and you can get this event with the following code: 

@ViewChild(CdkVirtualScrollViewport, {static: false}) virtualScroll: CdkVirtualScrollViewport;

ngAfterViewInit() {
  this.virtualScroll.elementScrolled().pipe(
    filter(event => {
      return this.virtualScroll.measureScrollOffset('bottom') === 0;
    }),
    tap((event)=> {
      // do something here
    })
  ).subscribe()
}

Upvotes: 1

Related Questions