This is a common UX pattern in web development: you display a modal or overlay, and you need to stop the background content from scrolling. Most of us solve this the same way — set overflow: hidden on the html or body, either directly or via a class.

It works, but it’s not elegant. You might have to deal with layout shift from the missing scrollbar, or patch it up with a bit of padding-right. On mobile, you might hit weird edge cases with touch scrolling.

You’d think by now the platform would offer a cleaner way to do this. <dialog> kind of does, but it’s not flexible enough for most use cases. A few libraries try to smooth over the rough edges, but they’re still using the same core trick under the hood.

So for now, the best solution is still the one we’ve been using all along: toggle overflow and move on.