angular / angular/components

cdk-virtual-scroll-viewport does not handle css position: sticky cleanly

Offen
#14,833 60 Kommentare 92 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/scrolling P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### What is the expected behavior?
using the css attribute `position: sticky` should allow for elements to remain displayed according to their sticky parameters.

#### What is the current behavior?
This works for a while but then breaks after a point. Im assuming its a matter of the 'stickied' dom elements getting recycled.

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-wnar6b-wzjdmh

This is a slightly modified version of an example from the docs. As you scroll the cdk-virtual-scroll-viewport you will notice the light blue headers stick to the the top of their area as expected. Once you exceed a certain amount of scrolling however the headers disappear. For me items 0-2 work but the 3rd one breaks.

Down below is an example using the [non-virtual] scrolling. Here the css attribute works as expected.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Forked from https://stackblitz.com/angular/apvvljrovad from the docs. no versions changed.

#### Is there anything else we should know?
https://github.com/angular/material2/issues/11621 also gets at my base requirement; wanting some elements of the virtual scroll list to 'stick around'. It would be ideal if standard css properties worked as via this ticket but that might be hard as the whole point of virtual-scroll is to remove things from the dom that 'shouldn't' be rendered. The position: sticky css attribute would seem to break those assumptions.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduziere das Verhalten im verlinkten StackBlitz mit cdk-virtual-scroll-viewport und vergleiche es anschließend mit dem Beispiel für nicht-virtuelles Scrolling aus der Angular-Dokumentation. Überprüfe, wie das Scrollen über die ersten sticky-Header hinaus dazu führt, dass diese verschwinden. Als abgeschlossen gilt die Aufgabe, wenn Elemente, die position: sticky verwenden, während des gesamten virtuellen Scrollens entsprechend ihren Sticky-Parametern angezeigt bleiben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.