Search code examples
qtscrollbarstylesheet

Change qt scrollbar style to match default qml scrollbar

How can I have the same style for qt scrollbars than the default one on qml?

Here is a screenshot of the default scrollbar on qt: enter image description here

And this is the one with qml ScollView component. enter image description here

Solution

  • There is a workaround, using stylesheet.

        this->setStyleSheet(QString(
        "QScrollBar:vertical {"
        "    border: 0px solid #c6c6c6;"
        "    background: transparent;"
        "    width: 13px;    "
        "    margin: 0px 0px 0px 0px;"
        "}"
        "QScrollBar:horizontal {"
        "    border: 0px solid #c6c6c6;"
        "    background: transparent;"
        "    height: 13px;    "
        "    margin: 0px 0px 0px 0px;"
        "}"
        "QScrollBar::handle {"
        "    background: #c6c6c6;"
        "    border: 3px solid %1;"
        "    border-radius: 6px;"
        "}"
        "QScrollBar::add-line:vertical {"
        "    height: 0px;"
        "    subcontrol-position: bottom;"
        "    subcontrol-origin: margin;"
        "}"
        "QScrollBar::sub-line:vertical {"
        "    height: 0 px;"
        "    subcontrol-position: top;"
        "    subcontrol-origin: margin;"
        "}"
        "QScrollBar::add-line:horizontal {"
        "    width: 0px;"
        "    subcontrol-position: right;"
        "    subcontrol-origin: margin;"
        "}"
        "QScrollBar::sub-line:horizontal {"
        "    width: 0 px;"
        "    subcontrol-position: left;"
        "    subcontrol-origin: margin;"
        "}").arg(SUPER_LIGHT_GREY));