The QScrollArea component offers a neat way of customizing the scrollbars by encapsulating your content. Think of it as a DOM element which has overflow: auto, but with your own custom styled scrollbar instead of browser’s default one and a few nice features on top.
Usage
The following examples are best seen on desktop as they make too little sense on a mobile device.
You can also take a look at Layout Drawer to see some more examples of it in action.
Basic
Styled
Dark design
Controlling scrollbar visibility
When using the visible Boolean prop, the default mouse over/leave behavior is disabled, leaving you in full control of the scrollbar visibility.
Delay
When content changes, the scrollbar appears then disappears again. You can set a certain delay (amount of time in milliseconds) before scrollbar disappears again (if component is not hovered):
Scroll position
Scroll event
Below is an example of using the @scroll event to synchronize the scrolling between two containers.
Accessibility v2.25+
The custom scrollbars and their thumbs are hidden from assistive technology — they are redundant, pointer-only controls over what remains a natively scrollable container.
Whenever the content actually overflows, the scroll container becomes a Tab stop on its own, so the browser’s native keyboard scrolling — arrow keys, PageUp/PageDown, Home/End — works without any setup (WCAG 2.1.1). A QScrollArea whose content fits stays out of the tab order, since there would be nothing to scroll. The tabindex prop still overrides both cases — pass -1 to opt out entirely.