Scrollbars on demand

Luckily, we can control to show a scrollbar or not only in the case of having a long content. That being said, it’s highly recommended to use auto as a value for overflow.

Consider the following example.

Notice how even if the content is short, there is a scrollbar visible. This isn’t good for a UI. As a designer, it’s just confusing to see a scrollbar when it’s not needed.

.element {
    overflow-y: auto;
}

With overflow-y: auto, the scrollbar will only be visible if the content is long. Otherwise, it won’t be there. Here is an updated figure.

Examples and use cases #

For macOS users, the scrollbar is shown only on scroll. You can change that in the settings via "System Preferences -> General -> Show scroll bars -> Always".

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque harum est eum aperiam sed ut soluta quia nisi asperiores autem. Corporis consectetur amet sapiente necessitatibus veritatis aut quia maiores. Enim.

Toggle Defensive