Nested ScrollView

[nilsl]

Hi all,

The following example shows a view with nested ScrollViews: Several lists of labels that can be scrolled, wrapped in another ScrollView to scroll over the individual lists:

import QtQuick 6.0
import QtQuick.Controls 6.0

ApplicationWindow {
	visible: true
	width: 400
	height: 600

	ScrollView {
		anchors.fill: parent

		ListView {
			id: outerList
			width: parent.width
			model: 20
			delegate: Item {
				width: outerList.width
				height: 200

				Rectangle {
					anchors.fill: parent
					color: "#f0f0f0"
					radius: 6
					border.color: "#cccccc"

					ScrollView {
						anchors.fill: parent

						// TODO: Want to use a WheelHandler to let the event bubble to the top ScrollView.
						//  However: Using this code breaks the inner list - no labels visible.
						//  And: Bubbling the event does not work anyway.
						// WheelHandler {
						// 	blocking: false
						// 	onWheel: (wheel) => {
						// 		wheel.accepted = false;
						// 	}
						// }

						Column {
							width: parent.width
							spacing: 4

							Repeater {
								model: 30
								delegate: Label {
									width: parent.width
									text: "Inner label " + (index + 1)
									padding: 4
								}
							}
						}
					}
				}
			}
		}
	}
}

In this state of the example, one can scroll the individual lists using the mouse wheel but not the top level list of lists.
For that, my first attempt is using a WheelHandler in order to let the wheel event bubble up.

Now I face two issues:

• First, adding the handler breaks the inner list: No more labels are visible.
• Second, the wheel event does not bubble anyway.

Question:
How can I achieve that both lists are scrollable.
The behaviour I'd like to implement is that if the mouse is above one of the inner lists, that list is scrolled.
If that list is scrolled to the top/end (no more scrolling possible in current scroll direction) and one goes on scrolling, the outer list gets scrolled.

I have a solution to check whether the list has scrolled to the end, but cannot find a solution to the above two issues.
Is it possible to solve?

Regards
Nils

[Ronel_qtmaster]

@nilsl Your code is a bit wrong. As you want to implement Nested ScrollView, the second scrollview shouldn't be inside ListView's delegate. It has nothing to do with the Listview ,nor it's delegate. In fact Listview itself has scrolling behaviour.Try something like this

import QtQuick 6.0
import QtQuick.Controls 6.0

ApplicationWindow {
visible: true
width: 640
height: 480
title: "Nested ScrollView Example"

// Outer ScrollView for vertical scrolling
ScrollView {
    anchors.fill: parent
    clip: true
    contentHeight: column.height

    Column {
        id: column
        width: parent.width

        // Example content for the outer scroll view
        Rectangle {
            width: parent.width
            height: 200
            color: "lightgray"
            Text {
                text: "Outer Scrollable Content"
                anchors.centerIn: parent
            }
        }

        Rectangle {
            width: parent.width
            height: 100
            color: "lightblue"
            Text {
                text: "More Outer Content"
                anchors.centerIn: parent
            }
        }

        // Inner ScrollView for horizontal scrolling
        ScrollView {
            width: parent.width
            height: 150
            contentWidth: 1000 // Make it wider than the parent
            horizontalAlignment: ScrollView.AlignLeft

            Row {
                spacing: 10

                Rectangle {
                    width: 200
                    height: 100
                    color: "lightgreen"
                }
                Rectangle {
                    width: 200
                    height: 100
                    color: "lightcoral"
                }
                Rectangle {
                    width: 200
                    height: 100
                    color: "lightsalmon"
                }
                Rectangle {
                    width: 200
                    height: 100
                    color: "lightpink"
                }
            }
        }

        Rectangle {
            width: parent.width
            height: 300
            color: "lightyellow"
            Text {
                text: "Final Outer Content"
                anchors.centerIn: parent
            }
        }
    }
}

}