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

Question

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.

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

Drenai · Accepted Answer · 2020-01-04 18:53:59Z

1

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()
}

answered Jan 4, 2020 at 18:53

Drenai

12.6k9 gold badges60 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tamir Shklaz Over a year ago

How could I get access to the parent scroll bar which is found in the main <body> tag?

Collectives™ on Stack Overflow

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

Context

Current Behaviour

Desired Behaviour

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Context

Current Behaviour

Desired Behaviour

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related