Nested ScrollView in QML doesn't respond to mousewheel

Question

I have a nested ScrollView, similar to the following QML:

import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle {
    width: 200
    height: 600

    ScrollView {
        id: sView
        anchors.fill: parent
        ListView {
            id: list
            boundsBehavior: Flickable.StopAtBounds
            clip: true
            focus: true
            interactive: true
            model: 5
            delegate: Component {
                MouseArea {
                    id: hoverArea
                    width: 100
                    height: 200
                    onClicked: list.currentIndex = index;

                    Rectangle {
                        id: fauxParent
                        anchors.fill: parent
                        border.width: 1
                        border.color: "black"

                        Rectangle {
                            anchors.top: parent.top
                            anchors.left: parent.left
                            height: parent.height
                            width: parent.width / 2
                            border.width: 1
                            border.color: "purple"
                            color: "green"
                            Text {
                                anchors.centerIn: parent
                                text: "stuff"
                            }
                        }
                        ScrollView {
                            //parent: sView
                            anchors.top: fauxParent.top
                            anchors.right: fauxParent.right
                            height: fauxParent.height
                            width: fauxParent.width / 2

                            ListView {
                                model: 3
                                delegate: Component {
                                    Rectangle {
                                        radius: 10
                                        height: 100
                                        width: 100
                                        color: "blue"
                                    }
                                }
                            }
                        }
                    }
                }
            }

        }
    }
}

It seems to run correctly, except that the inner ScrollView won't respond to the mousewheel: the outer ScrollView intercepts that event. The only fix I've found in research for this, is to set the inner scrollview's parent directly to the outer scrollview (uncomment the parent: sView line). Unfortunately, this re-positions all five scrollview delegates onto the top right corner of the outer scrollview. It seems that ScrollView positions itself based on its parent?

For the record, my actual application is wrapping a large section of the page in a scrollview so as to allow the user to access sections of it that may be out of bounds for the current window size. The content of this section, though, has a variety of different controls for a variety of different purposes, including some scrollviews. So I'd also accept an alternate way of moving around a set of generic content that's too large for the window.

This is a Windows desktop app, so I don't need to consider mobile-specific issues.

Vasco Rinaldo Vasco Rinaldo · Accepted Answer · 2014-05-11T20:11:47

You nested four elements that handle scroll Events.

Why do you put a ScrollView arround a ListView?

If you remove the ScrollViews the Mousewheel work fine.

Rectangle {
    width: 200
    height: 600
    ListView {
        anchors.fill: parent
        id: list
        boundsBehavior: Flickable.StopAtBounds
        clip: true
        focus: true
        interactive: true
        model: 5

        delegate: Component {
            MouseArea {
                id: hoverArea
                width: 100
                height: 200
                onClicked: list.currentIndex = index;

                Rectangle {
                    id: fauxParent
                    anchors.fill: parent
                    border.width: 1
                    border.color: "black"

                    Rectangle {
                        anchors.top: parent.top
                        anchors.left: parent.left
                        height: parent.height
                        width: parent.width / 2
                        border.width: 1
                        border.color: "purple"
                        color: "green"
                        Text {
                            anchors.centerIn: parent
                            text: "stuff"
                        }
                    }
                    ListView {
                        anchors.top: fauxParent.top
                        anchors.right: fauxParent.right
                        height: fauxParent.height
                        width: fauxParent.width / 2
                        model: 3

                        delegate: Component {
                            Rectangle {
                                radius: 10
                                height: 100
                                width: 100
                                color: "blue"
                            }
                        }
                    }
                }
            }
        }
    }
}

If you miss the Scrollbar look at this: How to create scrollbar in QtQuick 2.0?

Nested ScrollView in QML doesn't respond to mousewheel

1 Answers