search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.34k stars 6.74k forks source link

cdk-virtual-scroll-viewport - support window scroll #13862

Closed abeymg closed 2 years ago

abeymg commented 5 years ago

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?

sthan001 commented 3 years ago

What i feel is that,

  1. By default if we don't control overflow (overflow: auto) at cdk-virtual-scroll-viewport, that carries to parent element all the way to window. Now that is missing in the cdk-virtual-scroll-viewport element. and cdk-virtual-scroll-spacer should accept the element be it window, of element in local component, or element from parent component as scrollable. A attribute possibly?
  2. the cdk-virtual-scroll-viewport should be calculating header and footer size to occupy the cdk-virtual-scroll-spacer. Basically accept the header, footer and any other intermediate element height to be considered to have complete scroll option. Again via attribue.
  3. Either spacer to take care of the complete page available to scroll or we can set height of cdk-virtual-scroll-content-wrapper excluding header/breadcrumb/footer including media query adjustments.
  4. as much as possible the position of cdk-virtual-scroll-viewport should be not fixed, or absolute. because some application may not able to reuse at their component level depth if that is the case.

Angular doing lot, not sure why this feature is on hold for long time. And again, suggesting alternative 3rd party library is another overhead. These all angular can fix and sell itself well among industries.

ursaciuc-adrian commented 3 years ago

Until this is merged i found a quick workaround for this. You can create a new custom scrolling strategy which is basically the same as the fixed size scrolling strategy, but for the viewPort height you use the hight of the window and for the scroll offset you use the pageYOffset of the window. And what is left to do is to listen to the scroll event on the page and update the redered range when this happens. Here is a basic stackblitz with it. It might not work for every case, but it's good enough for what i need it to do. Maybe it will help others too. https://stackblitz.com/edit/window-virtual-scroll-strategy

ghenry22 commented 3 years ago

With Ionic Framework deprecating their own virtual-scroll in favour of CDK virtual-scroller the ability to scroll based on a parent element/window is essential in order for the CDK virtual-scroller to work with other common components like pull-to-refresh, infinite-scroll and iOS style auto expanding header styling in mobile apps.

Details from Ionic team: https://github.com/ionic-team/ionic-docs/blob/liam-v6-docs/src/pages/angular/virtual-scroll.md

I would be really great if we could pass in a scroll element to the virtual-scroller to use in a similar way to how https://github.com/rintoj/ngx-virtual-scroller works.

vahidvdn commented 3 years ago

@ghenry22 ionic built-in virtual list component was literally useless. Hope it's going to work with the angular CDK virtual-scroller.

ghenry22 commented 3 years ago

@vahidvdn I've used the Ionic virtual scroll component successfully in a number of cases. It definitely has some quirks and never got the attention it needed but when you work around it's specific weirdness it does the job.

I agree though I am hoping that the cdk virtual scroller will provide a much more robust and more actively supported solution. Only time will tell!

syam38 commented 2 years ago

Any update on this feature?

syam38 commented 2 years ago

Until this is merged i found a quick workaround for this. You can create a new custom scrolling strategy which is basically the same as the fixed size scrolling strategy, but for the viewPort height you use the hight of the window and for the scroll offset you use the pageYOffset of the window. And what is left to do is to listen to the scroll event on the page and update the redered range when this happens. Here is a basic stackblitz with it. It might not work for every case, but it's good enough for what i need it to do. Maybe it will help others too. https://stackblitz.com/edit/window-virtual-scroll-strategy

The stackblitz link is not working, could you please re share it @ursaciuc-adrian

ursaciuc-adrian commented 2 years ago

The stackblitz link is not working, could you please re share it @ursaciuc-adrian

Updated the url

vugar005 commented 2 years ago

For now, I ended up using Custom Intersection api. Stackblitz url

spike-rabbit commented 2 years ago

@mmalerba Would you still accept a PR adding this feature? I would be happy to provide one following the suggestions by @rmedaer

mmalerba commented 2 years ago

@spike-rabbit Yes, I'm happy to look at a PR along the lines of what we discussed above.

Harpush commented 2 years ago

Will it allow to have two virtual scroll viewports under the same container and the scroll will be in the container? Thus allowing them both to render only what's shown relative to the shared parent container.

spike-rabbit commented 2 years ago

@mmalerba Great, thanks for the info. I plan to provide one around March.

@Harpush Based on my current knowledge: yes. But I need to dive further into this to provide a reliable answer

lincolnthree commented 2 years ago

Thanks for all of you effort on this! Really looking forward to seeing it.

This feature is critical for a "native-like" feel in mobile apps with momentum scrolling. When scrolling locks up and you need to scroll again with a new gesture to continue past the virtual scroll viewport, or capture the gesture in the viewport instead of going past, it really interrupts the user experience.

I will be happy to test and contribute if there is a beta build to try!

angular-automatic-lock-bot[bot] commented 2 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.