Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks

Scrolling Windows

Scrolling is one of the most common ways that users interact with their content. Follow the guidelines in this section to help you enable convenient, intuitive scrolling that takes advantage of the translucent, transiently visible scroll bars in macOS.

Scroll bars are not persistently visible by default. In general, scroll bars can appear when users:

  • Open or resize a window that contains scrolling content

  • Open content within a window that is too small to display all of the content at once

  • Place two fingers on a trackpad or mouse surface

  • Actively scroll content

For example, you can see the scrollers in the Safari window shown here, because it was recently resized.

image: ../Art/safari_scrollers_2x.png

When users take an action that causes scroll bars to appear, the scroll bars disappear shortly after users stop interacting with the window or the content. This behavior helps users see that the content exceeds the size of the window body, without requiring the scroll bar to occupy valuable space in the content area.

The scroller size (relative to the length of the track) reflects how much of the content is visible. For example, a small scroller means that a small fraction of the total content is currently visible. The scroller also represents the relative location, in the whole document, of the portion that can be seen in the window.

Avoid causing the legacy scroll bar to display. Users expect scroll bars to be only transiently visible by default. Although users can change the appearance of scroll bars in General preferences, don’t force users to see scroll bars if they don’t want to. Be sure to avoid using a placard or placing a control inline with a scroll bar, because including these elements in your UI causes legacy scroll bars to appear in your app.

Don’t move window content when scroll bars appear. Because scroll bars are both transient and translucent, users can see the window content that is beneath them. It shouldn’t be necessary to adjust the layout of content in your window, and doing so risks confusing users.

Help users discover when a window’s content is scrollable. Because scroll bars aren’t always visible, it can be helpful to make it obvious when content extends beyond the window. In a table or list view, for example, you can display the middle of a row at the bottom edge of the window instead of displaying a complete row. Displaying partial content at the bottom edge of a window in this way shows users that there’s more to see.

Don’t feel that you must always indicate when text doesn’t fit within a document window by, for example, displaying a partial line of text at the bottom edge. Remember that scrolling is an intuitive and nondestructive action that users don’t mind experimenting with. When faced with a window full of text, the vast majority of users will instinctively scroll in the window to see if more content is available.

If necessary, adjust the layout of your window so that important UI elements don't appear beneath scrollers. Occasionally, there might be cases in which you want to avoid having a scroller appear on top of specific parts of your UI. In Mail, for example, the position of an unread message badge in the Mailbox List leaves enough room for the scrollers to display without visually interfering with the badge. If you need to do this, note that the overall width of a regular-size scroll bar is 10 points (the overall width of a small-size scroll bar is 8 points). If necessary, you can adjust your layout so that there are no important UI elements within 10 points of the edge of the content area (or within 8 points of the edge, if you're using a small-size scroll bar).

Choose the scroller color that best coordinates with your UI. If your UI is very dark, for example, you might want to specify the light-colored scrollers so that users can see them easily. You can specify light, dark, or default.

Determine how much to scroll when users click in the scroll track. Clicking in the scroll track advances the document by a windowful (the default) or to the pointer’s hot spot, depending on the user’s choice in General preferences. A “windowful” is the current height or width of the window, minus at least one unit of overlap to maintain the user’s context. You define the unit of overlap so that it makes sense for the content you display. For example, one unit might equal a line of text, a row of icons, or part of a picture. Note that you should respond to the Page Up and Page Down keys in the same way that you respond to a click in the scroll track; that is, pressing these keys should also move the content by a windowful.

When users press in the scroll track, consecutive windowfuls of the content should display until the location of the scroller catches up to the location of the pointer (or until the user stops pressing).

Scroll automatically when appropriate. Most of the time, the user should be in control of scrolling, but your app should perform automatic scrolling in the following cases:

  • When your app performs an operation that results in making a new selection or moving the insertion point. For example, when the user searches for some text and your app locates it, scroll the document to show the new selection.

  • When the user enters information from the keyboard at a location not visible within the window. For example, if the insertion point is on one page and the user has navigated to another page, scroll the document automatically to incorporate and display the new information.

    Your app determines the distance to scroll.

  • When the user moves the pointer past the edge of the window while making an extended selection, scroll the document in the direction the pointer moves.

  • When the user selects something, scrolls to a new location, and then tries to perform an operation on the selection, your app should scroll the content so that the selection is showing before performing the user’s operation.

Move the document only as much as necessary during automatic scrolling. Minimizing the amount of automatic scrolling helps users keep their place in the content. For example, if part of a selection is showing after the user performs an operation, don’t scroll at all. If your app can reveal the selection by scrolling in only one direction, don’t scroll in both.

If possible, show a selection in context when automatically scrolling to it. If the entire window shows only the selected content, it can be difficult for users to remember the position of the selection within the overall content.

Consider using small or mini scroll bars in a panel, if necessary. If space is tight, it can be acceptable to use smaller scroll bars in panels that need to coexist with other windows. Note that if a window uses small or mini scroll bars, all other controls in that window’s content area should also be the smaller version. (You can specify different sizes for most controls in Interface Builder.)

Avoid using a scroll bar when you should instead use a slider. Use sliders to change settings; use scroll bars only for representing the relative position of the visible portion of a document or list. For information about sliders, see Slider.

Don’t override the default gesture to make scrollers appear. Users are accustomed to the systemwide scrolling behavior. Scrollers appear automatically when users place two fingers on a trackpad or appropriate mouse surface. Don’t override this behavior.