Entonces tengo un elemento que reside al final de mi lista usando:
position: sticky; bottom: 0; Y estoy usando scrollIntoView(true) para desplazarme hasta él. Sin embargo, hay dos problemas.
Se desplaza primero a una posición en la que el elemento adhesivo se encuentra en su posición original. No pegado al fondo. Luego, debe scrollIntoView una vez más para que desplace el elemento hacia la parte superior.
ScrollIntoView también desplaza toda la ventana aunque el elemento esté dentro de un contenedor desplazable.
No puedo encontrar una solución para ninguno de los dos problemas. Mi objetivo es tener un elemento adhesivo y poder alinearlo con la parte superior al hacer clic en él. Estoy usando Angular pero realmente no creo que eso importe.
La solución fue:
scrollTo(container: HTMLUListElement, header: HTMLLIElement) { container.scrollTo(0, header.offsetTop); container.scrollTo(0, header.offsetTop); } Es importante que no utilice el desplazamiento suave en la función scrollTo ni scroll-behavior: "smooth" en CSS.
Y no olvides agregar position: relative al contenedor.