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...

Usage

The following examples are best seen on desktop as they make too little sense on a mobile device.

TIP

You can also take a look at Layout Drawer to see some more examples of it in action.

Basic

Vertical content



Horizontal content



Vertical and horizontal content



Styled

Styled thumb and bar



Styled



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



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):

Delay



Scroll position

Scroll Position



Scroll event

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

Synchronized