cdk-virtual-scroll-viewport - support window scroll

[abeymg]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Allow the scroll of the cdk-virtual-scroll-viewport to be controlled by the top level window scrollbar.

See example at the link below. (Go to that page and click on parent scroll to see desired behavior)
https://rintoj.github.io/ngx-virtual-scroller

Another example of window scrolling in the context of virtual scrolling
https://bvaughn.github.io/react-virtualized/#/components/WindowScroller

What is the current behavior?

Specifying a parent scroll does not seem to be supported, from what I can tell.

What is the use-case or motivation for changing an existing behavior?

Having a single top level window/page scroll is standard in a lot of SPAs. The virtual-scroll would be a lot more useful in these cases, if it could use the same scroll bar, otherwise often times you end up with two scrollbars (one for the virt-scroll and the other for the page, or else a smaller inset container for the virt-scroll with a scrollbar), which is less than ideal.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 7.0.1
Material: 7.0.2

Is there anything else we should know?

[LeParadoxHD]

That would be very useful!

[vahidvdn]

+1

[flolu]

This should definitely be implemented soon!

[wunaidage]

mark to track status. This will be awesome!

[rmedaer]

@mmalerba I did a small POC to support both window and closest relative parent virtual scrolling.

Actually it's not yet ready for merge. It's still missing tests, examples, and even implementations... But at least it gives a proposal for the implementation. I would be really interested to get your feedback.

In my use-case it fits well. Hope you appreciate.

Here is a demo:

Kind regards,

[mmalerba]

@rmedaer sure, I can take a look. Can you link me to the branch where you're working?

[rmedaer]

Yeah ! I committed on master branch in my fork. I know it's bad but again my plan was just to do a test and it became probably more ..

The dev-app (demo) contains an example.

[mmalerba]

@rmedaer Overall I like the approach, though parts of the implementation I'm not too sure about. I also think we could make the nested viewport more flexible by either making a directive that can be used to mark the parent, or using an @Input() that lets the user specify the scrolling container (e.g. viewportRoot=".some-ancestor-element"), rather than just assuming it's the direct parent.

@jelbourn Do you have any thoughts about this proposal?

[jelbourn]

Could you summarize the approach?