angular / angular/components

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

Abierto
#14,833 60 comentarios 92 reacciones 0 asignados Ver en GitHub
area: cdk/scrolling P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### 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.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Reproduce el comportamiento en el StackBlitz enlazado usando cdk-virtual-scroll-viewport y compáralo después con el ejemplo de desplazamiento no virtual de la documentación de Angular. Verifica cómo desplazarse más allá de los primeros encabezados sticky hace que desaparezcan. Se considera terminado cuando los elementos que usan position: sticky permanecen mostrados según sus parámetros sticky durante todo el desplazamiento virtual.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.