How to use the scroll on a horizontal QML scrollview - qt

Question

I would like to use the scroll on my mouse to scroll on a horizontal scrollview. How to do i achieve this here is the code for my sample scroll view.
ScrollView {
id:scrollview
ListView {
anchors.fill: parent
model: 30
orientation: ListView.Horizontal
delegate: Component{
Item{
height: scrollview.height
width: scrollview.height
Rectangle{
anchors.fill: parent
color:"lightgrey"
Text{
anchors.centerIn: parent
text: index
}
}
}
}
}
}
I would like to achieve a scroll like in the vertical view but instead just in the horizontal orientation

Answer 1

I got it to work with a MouseArea on top of the ScrollView that listens for mouse wheel events but passes through other events.
ScrollView {
id:scrollview
property int scrollSpeed: 30
ListView {
anchors.fill: parent
model: 30
orientation: ListView.Horizontal
delegate: Component {
Item {
height: scrollview.height
width: scrollview.height
Rectangle {
anchors.fill: parent
color:"lightgrey"
Text {
anchors.centerIn: parent
text: index
}
}
}
}
}
}
MouseArea {
anchors.fill: scrollview
onWheel: {
if (wheel.angleDelta.y > 0) {
scrollview.flickableItem.contentX -= scrollview.scrollSpeed;
if (scrollview.flickableItem.contentX < 0) {
scrollview.flickableItem.contentX = 0;
}
} else {
scrollview.flickableItem.contentX += scrollview.scrollSpeed;
if (scrollview.flickableItem.contentX + scrollview.flickableItem.width > scrollview.flickableItem.contentWidth) {
scrollview.flickableItem.contentX = scrollview.flickableItem.contentWidth - scrollview.flickableItem.width;
}
}
}
onClicked: mouse.accepted = false;
onPressed: mouse.accepted = false;
onReleased: mouse.accepted = false;
onDoubleClicked: mouse.accepted = false;
onPositionChanged: mouse.accepted = false;
onPressAndHold: mouse.accepted = false;
}