-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Feature Description
Currently, cdk-virtual-scroll-viewport requires a fixed-height container to calculate the rendered range. While this works well for controlled layouts (tables, grids, panels), it limits use cases where natural document flow and window-based scrolling are required.
In many modern applications (social feeds, timeline views, content streams, long-form dashboards), the scroll container is the browser window itself rather than a fixed-height element.
There is currently no built-in way to:
💠Attach virtual scrolling behavior to the window scroll
💠Support natural page flow without constraining layout to a fixed-height viewport
💠Efficiently virtualize dynamic-height content within the document scroll context
As a result, developers must choose between:
💠Infinite scroll without virtualization (leading to growing DOM size and memory usage), or
💠Artificially constraining layout using a fixed-height container, which impacts UX and design flexibility.
Proposed Enhancement
Introduce a window-based virtualization mode in CDK that:
💠Uses window as the scroll container
💠Computes rendered range based on document scroll position
💠Supports dynamic item sizing strategies
💠Maintains performance guarantees similar to existing VirtualScrollStrategy
Benefits
💠Enables feed-style and content-heavy applications
💠Improves performance for large datasets rendered in document flow
💠Reduces need for third-party libraries
💠Aligns CDK with modern UI patterns
Thank you for considering this enhancement.
Use Case
1 ) Social Feed Applications
Applications that display large, continuously scrolling feeds (similar to Facebook, LinkedIn, or Twitter-style timelines) require virtualization attached to the window scroll. These feeds often contain dynamic-height content such as images, text blocks, and embedded media. A fixed-height container breaks the natural layout and user experience.
-
Content-Heavy Dashboards
Enterprise dashboards displaying activity logs, audit trails, or notification streams may contain thousands of entries. These are typically rendered as part of the main page scroll rather than inside a constrained viewport. -
E-commerce Product Listings
Product listing pages with large catalogs require natural document scrolling for SEO and UX reasons. Virtualization attached to the window would improve performance while preserving layout flow. -
Blog / CMS / News Platforms
Long-form content streams or aggregated article lists benefit from virtualization but cannot realistically be wrapped inside fixed-height containers without affecting design flexibility.
Current Behavior:
💠cdk-virtual-scroll-viewport requires a fixed height container.
💠Virtualization only works within an explicitly defined scrollable element.
💠It cannot attach to the browser window scroll.
💠Dynamic-height content requires manual strategies and layout constraints.
💠As a result, full-page scrolling with virtualization is not supported out of the box.
Expected Behavior:
💠Ability to use the browser window as the scroll container.
💠Virtualization should calculate the rendered range based on document scroll position.
💠Support for dynamic-height content without forcing a fixed viewport height.
💠Maintain performance guarantees similar to existing VirtualScrollStrategy.
In all these scenarios, developers must currently choose between:
💠Infinite scroll without virtualization (increasing DOM size over time), or
💠Artificially constraining layout with a fixed-height viewport, which negatively impacts UX.
Window-based virtual scrolling would solve this gap