So I have an element that resides at the bottom of my list using:
position: sticky;
bottom: 0;
And I am using scrollIntoView(true) to scroll to it. There is two problems though.
It scrolls first to a position where the sticky element in in its original position. Not stickied to the bottom. Then you have to fire the scrollIntoView once again so it scrolls the element to the top.
ScrollIntoView scrolls the whole window too even though the element is inside a scrollable container.
I can't find a solution for either problem. My goal is to have a sticky element and be able to align it to the top when clicking it. I am using Angular but I don't really think that matters.
The solution was:
scrollTo(container: HTMLUListElement, header: HTMLLIElement) {
container.scrollTo(0, header.offsetTop);
container.scrollTo(0, header.offsetTop);
}
It's important that you neither use smooth scrolling in the scrollTo function or scroll-behavior: "smooth" in CSS.
And don't forget to add position: relative to the container.