Scroll Bars
Last updated: September 11, 2015 at 19:08 pm

Scroll bars are called whenever your content exceeds the size of the window.


Visual example of the element:


What problem does this element or pattern solve?
Although they are one of the most common interactions, you should include scroll bars in your Style Framework definitions. Scroll bars are normally activated whenever there is more information than can be displayed in the viewable area of a screen or container. They are most commonly vertical, but can be horizontal as well.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web,

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Do you have custom visual styling for your scroll bars or will your applications always default to the browser or OS styling? If you require custom styling, be sure to include all specifications, both visual and behavioral. Also define if there are any instances when default scroll bar styling is acceptable.
  • When should scroll bars appear? When are they intentionally suppressed?
  • Are horizontal scroll bars permitted, or vertical only? If vertical only, be sure to provide your users with a link to interactions which present horizontal movement such as carousels.
  • Do you permit scroll bars within containers such as modals, tabbed panels, or accordions?


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
scrollbar, handle, thumb, trough, scroller
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply