O3DE UI Scrollbar Styles

O3DE provides several style choices for your scrollbars. With the default style, the scrollbar is always visible. However, you have the option to set the scrollbar display mode so that it only appears when users hover over the scroll area. You can also apply a dark style to the scrollbar to make it more visible on light backgrounds.

The following examples demonstrate how to apply these styles.

Scrollbar display modes

component scrollbar display modes

Use AzQtComponents::ScrollBar::setDisplayMode to set the scrollbar display mode. The default mode is AlwaysShow.

Example

#include <AzQtComponents/Components/Widgets/ScrollBar.h>
#include <QScrollArea>

using namespace AzQtComponents;

// Use a scroll area that was created earlier in your code or .ui file.
QScrollArea* scrollArea;

// Set the scrollbar to appear only when users hover over the scroll area.
ScrollBar::setDisplayMode(scrollArea, ScrollBar::ScrollBarMode::ShowOnHover);

// Set it back to default so that it always appears.
ScrollBar::setDisplayMode(scrollArea, ScrollBar::ScrollBarMode::AlwaysShow);

Scrollbar with dark style

Use AzQtComponents::ScrollBar::applyDarkStyle to make the scrollbar more visible on light backgrounds.

ScrollBar::applyLightStyle reverts the scrollbar back to the default style.

Example

#include <AzQtComponents/Components/Widgets/ScrollBar.h>
#include <QScrollArea>

// Use a scroll area that was created earlier in your code or .ui file.
QScrollArea* scrollArea;

// Set the scrollbar style to dark, to make the scrollbar more visible on light backgrounds.
AzQtComponents::ScrollBar::applyDarkStyle(scrollArea);

// Revert the scrollbar style back to the default light style.
AzQtComponents::ScrollBar::applyLightStyle(scrollArea);

C++ API reference

For details on the scrollbar API, see the following topic in the O3DE UI Extensions C++ API Reference:

AzQtComponents::ScrollBar

Relevant Qt documentation includes the following topics:

QScrollArea Class