As per CSS2 spec:
When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.
This scrolling mechanism – most of the time – also comes with scrollbars. There are two types of scrollbars we can distinguish:
- Overlay Scrollbars
- Classic Scrollbars
Controlling the visual styling of these scrollbars is defined in the CSS Scrollbars Styling Module Level 1 spec.
Overlay Scrollbars are those iOS/macOS-style scrollbars which are placed over the content. They are not shown by default, but only while the user is scrolling. To keep the content underneath visible they are semi-transparent, but that’s totally up to the user-agent (browser) to determine. While interacting with them, their size may also vary.
Classic Scrollbars are scrollbars that are placed in a dedicated Scrollbar Gutter. The Scrollbar Gutter is the space between the inner Border Edge and the outer Padding Edge. These scrollbars are usually opaque (not transparent) and take away some space from the adjacent content.
- @TODO:
window.scrollX/window.scrollY - @TODO:
document.scrollLeft/document.scrollTop
💡 These findings are a textual representation of the test results table.
@TODO:
Some browsers support overscrolling the scrollport. When doing this with a swipe gestured, they might bounce back. This behavior is available on macOS, iOS (and maybe Windows, but that is currently untested). Android does not support this.
Note: When overscrolling slowly at the top edge in Mobile Browsers you might trigger a pull-to-refresh. In this part we are focussing on overscrolling while not triggering pull-to-refresh.
Overscrolling is covered in the “CSS Overscroll Behavior Module Level 1” spec.