Scrollbars are used when there’s more content than can fit on a screen or in a container.
Common scrolling types
There are a variety of different scrolling types that you can use in your interface.
This is probably the most common type of scrolling experience that you would find online. Not all the elements of the page can fit on the same screen, so they sit below each other. As the user scrolls, they see more of these elements or components.
Most scrolling has smooth scrolling. However, for sites that have full-screen sections, you can use a snap scroll to animate to each new screen.
Scrolling in a pane
Some panes or components need more space than the page design allows.
Scrolling in a dropdown
A scrollbar is needed in instances where there are a lot of items in a dropdown menu. The general rule is that only 6 to 10 items should be visible in the dropdown.
Some interfaces need 2 scrollbars to allow users to navigate around. Usually, you would avoid this type of interface, except in the case of maps.
There are a few best practices when it comes to scrollbars and scrolling areas.
Have the most important information above the fold
You can’t always rely on your users to scroll down a page; you have to entice them to move their mouse down. You should place the most important information above the fold so that users will still be able to see it even if they don't scroll further down the page.
Jargon: Above the fold
To have content above the fold means that all the important information is visible to the user when they first load the website and before they start scrolling. This phrase and thinking comes from newspaper printing, where the most important information had to be on the top half of the front page to be visible without opening it.
Avoid having both vertical and horizontal scrolling unless on a map
Having both horizontal and vertical scrolling becomes very confusing for users, and they can get disorientated. The most common exception seems to be digital maps.
Avoid horizontal scrolling unless it’s part of the experience
Horizontal scrolling is less popular with users than vertical scrolling. This seems mostly due to the fact that horizontal scrolling goes against the standard design pattern. Some websites do use horizontal scrolling successfully, but this is usually as part of a specific experience (for example, a horizontal timeline).
Consider adding a “jump to top” button
A “jump to top” button is an easy way for users to quickly navigate to the top of the page.
Avoid double scroll
A double scroll happens when you have a scrollbar on a container as well as a scrollbar on the page as a whole. While it’s excusable on desktop, it can become very frustrating on mobile.
Remove scrollbar if all content is visible
If everything in the design fits onto a single page above the fold, you should remove the scrollbar. Having a redundant scrollbar may confuse the user.
Consider adding prompts
For websites that use big sections, particularly single-page scrollers, you should consider having a prompt to let users know that they can scroll down.