CSS Snap Scrolling: The Pitfalls Nobody Warns You About

CSS scroll snapping is one of those features that looks magical in a CodePen and then fights you in production. I learned this while building the pixel mode of my portfolio.

Problem one: nested scrollable elements. If you have a modal or dropdown inside a snap container, the browser gets confused about which element should receive scroll events.

Problem two: dynamic content heights. Snap points assume fixed section heights. When content changes — like revealing a code block or expanding a card — the snap points become stale.

Problem three: programmatic scrolling. scrollTo() and scrollIntoView() don't always respect snap points consistently across browsers. I ended up building a custom navigateTo() function.

The solution was a combination of CSS snap for the base behavior, IntersectionObserver for tracking the active section, and JavaScript for programmatic navigation. It's not perfect, but it works.