Hide Those Pesky Scrollbars

A common mistake when creating overflowing containers with CSS is to use overflow: scroll or it’s x/y variants. This will result in scrollbars always showing, even if the content doesn’t overflow. This results in “phantom scrollbars” that are useless and only take up space and distract your users.

Instead, it’s better to use overflow: auto which will only show the scrollbar when it actually is needed. There is however some exceptions to this rule, most notably that you still should use overflow: scroll if the scrollbar appears or disappears frequently causing portions of the page to shift. An example of this could be a client-side rendered site that has short and tall pages where navigating between pages cause the site scrollbar to appear on one page, but not on the next. This can cause the page layout to shift slightly left and right and is quite distracting. In a scenario like this, it’s a good idea to always show the scrollbar.