scrollbar_test.qml

ListView {
        id: list

        model: 10

        anchors.fill: parent

        delegate: Rectangle {
            implicitHeight: 50
            implicitWidth: list.width
            color: colors[index % colors.length]

            border.width: 1
            border.color: index % 2 ? "gray" : "black"

            Layout.margins: 10
            Layout.fillWidth: true
        }

        ScrollBar.vertical: ScrollBar {
            id: scroll_bar

            minimumSize: 0.1
            implicitWidth: pressed ? 60 : 20

            onActiveChanged: {
                timer.restart()
            }

            visible: size < 1.

            onPressedChanged: {
                if (!pressed) {
                    timer.restart()
                }
            }

            Timer {
                id: timer
                interval: 2000

                onRunningChanged: {
                    console.log("onRunningChanged", running)
                }
            }

            property bool moving: active || pressed

            onMovingChanged: {
                console.log("moving =", moving)
            }

            contentItem: Rectangle {
                color: "darkgray"

                radius: 5

                opacity: scroll_bar.moving ? 1 : 0.3

                border.width: 3
                border.color: "gray"
            }

            background: Rectangle {
                color: "white"

                radius: 5

                opacity: scroll_bar.moving ? 0.7 : 0.1
                visible: scroll_bar.pressed

                border.width: 3
                border.color: "white"
            }
        }
    }