Scrollbar guidelines

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.

Long page

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.

Snapped scroller

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.

Dual axis

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.

---

Best practices

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.

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.

---