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.