Today I learned about scrollbar-gutter. This solves a problem I had completely forgotten existed until pretty recently.
When websites have content that extends beyond what's visible on the screen, they're scrollable. And when they're scrollable, they have scrollbars. Pretty fancy stuff.
But sometimes scrolling is turned off, whether that's caused by overflow: hidden or because a page is loaded that doesn't have enough content to warrant a scrollbar.
When this happens, the space occupied by the scrollbar disappears. And if your browser always shows a scrollbar, the page shifts slightly to account for the lost space.
This is something you never think about when your browser only shows the scrollbar when you're scrolling and doesn't take up any space.
But when you start working on a machine or browser that forces the scrollbar to take up space whenever the page is scrollable, that slight shift can be like nails on a chalkboard.
Thankfully, what used to require multiple lines of CSS and JavaScript can now be fixed with one line of CSS!
css
No more page shift! 🎉
