I have an accordion-type component at the bottom of a scrollable container. When the accordion opens, it ends up just overflowing behind the scroll region. I’m trying to get the expanded contents to remain within view while opening. Because it animates open over time, simply setting the scroll position on-trigger doesn’t work. Another option is delaying the scroll until it’s fully open but this is a clunky experience. What are the solutions to this problem?
I’ve found the most elegant solution to involve utilizing the ResizeObserver API and scrollIntoView with block: 'nearest':
// On accordion open
const observer = new ResizeObserver(() => myAccordion.scrollIntoView({ block: 'nearest' }));
observer.observe(myAccordion);
// Cleanup on completion
observer.disconnect();
1