Custom ScrollBar to add top & bottom buttons (Windows Style)

I have a QT application and need to custom my ListView ScrollBar, to have a Windows Look&Fell scroll, including top and bottom buttons (to scroll up or down when clicked)

As far as I know, all I can customize from ScrollBar is the contentItem and the background. There is no default way to add these top & bottom buttons. To add it manually

To add buttons at top & bottom I have added margins in the contentItem, so I have space for my buttons. But with that margin, the height of the contentItem is smaller and with a lot of elements in my ListView the handle is NOT visible...

Is it possible to have a minimum height for the contentItem? Is there any other way to have this 2 buttons?

Thanks in advance

Code:

Code:

---

import QtQuick 2.7
import QtQuick.Controls 2.0
 
Item {
    anchors.fill: parent
 
    MouseArea {
      anchors.fill: id_list
      onWheel: id_list.flick(0, wheel.angleDelta.y * 5)
    }
 
    ListModel {
         id: listModel
         Component.onCompleted: {
             for (var i = 0; i < 1000; i++)
                 append({ role_text: "Item " + i});
         }
     }
 
    ListView {
        id: id_list
        anchors.fill: parent
 
        interactive: false
        boundsBehavior: Flickable.StopAtBounds
        focus: true
 
        Keys.onPressed: {
          if (event.key === Qt.Key_Up) id_list.flick(0, 500)
          else if (event.key === Qt.Key_Down) id_list.flick(0, -500)
        }
 
        keyNavigationEnabled: true
 
        model: listModel
        ScrollBar.vertical: ScrollBar {
            id: id_scroll
            interactive: true;
            policy: ScrollBar.AlwaysOn
            anchors { top: parent.top; topMargin: 0; bottom: parent.bottom; bottomMargin: 0; right: parent.right/*; rightMargin: -2*/}
 
            contentItem: Item {
                implicitWidth: 11
                implicitHeight: 100
 
                Rectangle {
                    anchors { top: parent.top; topMargin: 13; bottom: parent.bottom; bottomMargin: 13; left: parent.left; leftMargin: -2; right: parent.right; rightMargin: -2}
                    color: "green"
                }
            }
 
            background: Item {
                implicitWidth: 11
                implicitHeight: id_scroll.height
 
                Rectangle {
                    anchors { top: parent.top; bottom: parent.bottom; bottomMargin: 0; left: parent.left; right: parent.right}
                    color: "#ededed"
                }
 
                Rectangle {
                    anchors { top: parent.top; right: parent.right }
                    height: 15; width: height
                    color: "red"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: id_list.flick(0, 500)
                    }
                }
                Rectangle {
                    anchors { bottom: parent.bottom; right: parent.right }
                    height: 15; width: height
                    color: "red"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: id_list.flick(0, -500)
                    }
                }
            }
        }
 
        delegate: Rectangle {
            height: 40
            width: id_list.width
            color: "white"
            border { color: "black"; width: 1 }
            TextEdit {
                anchors.centerIn: parent
                id: id_text
                text: role_text;
                selectByMouse: true;
                readOnly: true;
                persistentSelection: true
            }
        }
    }
}

---