Why donate
API Explorer
Scroll Area

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.

Loading QScrollArea API...


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.


Vertical content

Horizontal content

Vertical and horizontal content


Styled thumb and bar


Dark design

Force dark mode

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.

Controlling scrollbar visibility


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 Position

Scroll event

Below is an example of using the @scroll event to synchronize the scrolling between two containers.