Customising ScrollView scroll bars

[Bob64]

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?