Important: Please read the Qt Code of Conduct -

Customising ScrollView scroll bars

  • I made a custom ScrollBar, mainly changing the contentItem to be bigger than the default one and changing some of the colours. This worked fine in the context I first used it but then I tried to replace the scroll bars with it in an existing ScrollView-based component (wrapping a TextArea).

    The documentation suggests that one can customise the scroll bars via the attached properties, thus:

    ScrollView {
        ScrollBar.horizontal: ScrollBar { ... }
        ScrollBar.vertical: ScrollBar {...}

    so I initially tried assigning my custom scroll bar here. This worked for the horizontal but not the vertical scrollbar. Although both were visible and the correct size, I could not 'grab' the vertical bar and the expected colour change on pressed did not occur.

    Inspecting in GammaRay, I see that the ScrollView actually has four scroll bars attached. I presume that these are the two original attached bars plus the two I have assigned.

    I have found two approaches that seem to work but I don't know which is 'better' or even if there is a more correct way to do this:

    • Assign an instance of my scrollbar to each of the ScrollBar.horizontal and ScrollBar.vertical attached properties as I tried before, but set their z to 1.
    • Don't try to replace the attached scrollbars but just replace their content items with that of my custom ScrollBar. i.e, set ScrollBar.vertical.contentItem, etc.

    I do not have a good mental model of how attached properties work and what is allowed and what isn't. Certainly, I think the documentation could be clearer about what is going on though because it does imply that one can simply assign a new ScrollBar to the attached properties.

    Is anyone able to offer any advice or explanation here please?

Log in to reply