Problem
More information is in the page or element than can fit in the viewport. A method of access to, and indicator of this state must be provided.
Solution
Variations
Primary direction: vertical suggested, sometime horizontal (define why! data that applies, generally)...
Additional secondary direction: sometimes a short scroll a secondary direction is needed, such as zooming on a web page (which is generally vertical). Why is this secondary??? Does it anchor more, or... anything else??? Just the part where we allow the scrollbar that direction to be obscured more (behind SKs, as we did for browsers) maybe...
Very rarely, two equal directions, such as a photo.
Do not confuse this pattern with the Infinite Area patterns, either in one or two dimensions, which does not use scrollbars due to the arbitrarily large data set presented.
Interaction Details
Cannot grab the scrollbar directly, as a general rule. Phones too small, so it would allow accidental grabbing of page content.
Instead, touch scroll on page... care to not click items and detect scroll actions. Great care with draggable items in a scroll area. Try to avoid drags that go the same direction as the scroll; use multi-finger gestures, etc.
Scroll-and-select generally scrolls by item, line by line for select lists, jumps link to link on pages. But never jump past a link... at which point (or if no links) down and up scroll at a reasonable speed.
Scroll acceleration and inertia...
Presentation Details
Show an indicator, always! When do you not?
Relative size of viewport:total based on size of scroll indicator.
Doesn't need to be huge. Bars can be as small as 2 px. If you have a large bezel or overscan, much larger, but current devices expose the whole screen and tend to have no bezel occlusion, so this is fine
Or, a bar that sticks out further
Antipatterns