How to customize ScrollView from qtquick controls 2.3 - qt

Question

I'm using using ScrollView control from import QtQuick.Controls 2.3version because it looks better that prior ones.
The problem is that if i try to customize it with ScrollBar.vertical it looses some functionality. I can't press it and drag it up and down like it does by default.
I've searched and i've find a way to do the drag functionality.
The code i've used is:
import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Controls 2.3
ApplicationWindow {
id: window
title: "Stack"
visible: true
height: 200
width: 400
ListModel {
id: libraryModel
ListElement {
text: "A Masterpiece"
}
ListElement {
text: "Brilliance"
}
ListElement {
text: "Outstanding"
}
}
Item {
id: page
anchors.fill: parent
width:parent.width
height: parent.height
ScrollView {
id:scrollView
anchors.fill:parent
ScrollBar.vertical: ScrollBar {
parent: scrollView
x: scrollView.mirrored ? 0 : scrollView.width - width
y: scrollView.topPadding
height: scrollView.availableHeight
active: scrollView.ScrollBar.horizontal.active
contentItem: Rectangle {
implicitWidth: 6
implicitHeight: 100
radius: width/2
color: scrollView.pressed ? "orange" : "green"
}
}
Column{
width:parent.width
spacing:10
TextField {
id:textField
implicitHeight: 30
font.bold: true
}
ComboBox {
id:comboBox
anchors.topMargin: 10
textRole: "text"
model: libraryModel
}
TextField {
id:textField2
anchors.topMargin: 10
implicitHeight: 30
font.bold: true
}
ComboBox {
id:comboBox2
anchors.topMargin: 10
textRole: "text"
model: libraryModel
}
TextField {
id:textField3
anchors.topMargin: 10
implicitHeight: 30
font.bold: true
}
ComboBox {
id:comboBox3
anchors.topMargin: 10
textRole: "text"
model: libraryModel
}
TextField {
id:textField4
anchors.topMargin: 10
implicitHeight: 30
font.bold: true
}
ComboBox {
id:comboBox4
anchors.topMargin: 10
textRole: "text"
model: libraryModel
}
}
}
}
}
What did i missed on the code? Maybe on ScrollBar?

Answer 1

I've fixed it by setting a different parent for ScrollBar (link). Also, to change the color you need to check ScrollBar property instead of ScrollView:
ScrollBar.vertical: ScrollBar {
id: scrollBar
parent: scrollView.parent
policy: ScrollBar.AlwaysOn
x: scrollView.mirrored ? 0 : scrollView.width - width
y: scrollView.topPadding
height: scrollView.availableHeight
active: scrollView.ScrollBar.horizontal.active
contentItem: Rectangle {
implicitWidth: 6
implicitHeight: 100
radius: width/2
color: scrollBar.pressed ? "orange" : "green"
}
}

Answer 2

If you set z: 1 (or any value > 0) to your ScrollBar the problem should be fixed.
I am not sure about the reason but it looks like it is related to the scrollbar attached by default to the ScrollView, that prevents you to access the custom scrollbar in this 10px zone.
cf Why is there a dead zone on the right side of my flipable?