QML: WebEngineView can't be scrolled in ScrollView (Flickable too)

Question

I have some inconvenience with WebEngineView. I've placed it like other element in my scroll view. It's just need to play some YouTube video. So, when I scroll through my ScrollView, when mouse is on WebEngineView area it won't scroll anymore.

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    
    ScrollView
    {
        id: myScrollView
        anchors.fill: parent;
        Rectangle
        {            
            ...
        }
        
        Text ...
        Text ...
        other stuff
        
        WebEngineView
        {
            id: myWebEngineView
            Component.onCompleted:
            {
                loadHtml(model.modelData.someHTMLData);
            }                
        }
    }
}

As I discovered. You can do enabled = false on WebEngineView. But it makes it unclickable. I've also tried to add MouseArea in it, didn't help. Wrapping it in Item also didn't work.

EDIT: Considering Stephan's answer I think I should provide more info about my actual project.

My code have this hierarchy:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3
import QtWebEngine 1.10

Popup {
    id: root

    ...
    property int bottomExtraSpace: 60

    ...

    contentItem: Item {

        // Some controls here
        ...

        SwipeView {
            id: swipableView

            anchors.fill: parent
            clip: true

            Repeater {
                id: subViewRepeater

                Loader {
                    active: parent.visible && (SwipeView.isCurrentItem
                                               || SwipeView.isNextItem
                                               || SwipeView.isPreviousItem)
                    sourceComponent: ScrollView {
                        id: scrollView

                        contentHeight: column.height + root.bottomExtraSpace
                        contentWidth: width

                        ColumnLayout {
                            id: column
                            spacing: 10

                            anchors {
                                top: parent.top
                                left: parent.left
                                right: parent.right

                                topMargin: 10
                                leftMargin: 10
                                rightMargin: 10
                            }

                            Image {
                                ...
                            }

                            RowLayout {
                                spacing: 30

                                Layout.alignment: Qt.AlignHCenter
                                Layout.fillWidth: true

                                Control {

                                    // This control is on the left side of WebView
                                }

                                // Here I've tried to wrap WebEngineView 
                                // in Flickable
                                Flickable {
                                    id: myScrollView

                                    Layout.preferredWidth: 670
                                    Layout.preferredHeight: 430
                                    Layout.rightMargin: 20

                                    // anchors.fill: parent
                                    ScrollBar.vertical: ScrollBar {
                                        policy: ScrollBar.AlwaysOn
                                        width: 20
                                    }
                                    clip: true
                                    contentWidth: myWebEngineView.width
                                    contentHeight: myWebEngineView.height
                                    WebEngineView {
                                        id: myWebEngineView
                                        width: myScrollView.width - 20
                                        height: Math.max(contentsSize.height,
                                                         500)
                                        Component.onCompleted: url = "https://stackoverflow.com/questions/78632674/qml-webengineview-cant-be-scrolled-in-scrollview-flickable-too"
                                    }
                                }
                            }

                            Control {

                                // some control on bottom
                            }
                        }
                    }
                }
            }
        }
    }
}

The point is - I can scroll through other elements than WebEngineView. So when my mouse is in a WebEngineView's area. I want to scroll scrollView. WebEngineView would be full size page (video), so scrolls here, is not needed.

Why I have tried to wrap myWebEngineView in Flickable - I've discovered that even in this case, myScrollView didn't react to mouse scroll. So neither myScrollView (Flickable) and scrollView(ScrollView on the root) didn't react to mouse scroll.

Here is the picture of actual program I'm working on:

EDIT 2: Actually Flickable works with WebEngineView content. But I don't want it to. I want WebEngineView to be scrollable like other items in ScrollView. Not it's content (web page) but WebEngineView it'self

Answer 1

I was able to make it work with Flickable:

• Ensure Flickable contentWidth and contentHeight are set correctly = Ensure Flickable (or Scrollable) has only one top-level component it can be a Column if you need to group several
• Ensure WebEngineView width and height are set correctly
• Optionally, configure Flickable's scrollbar

N.B. by making the scrollbar visible and have a fixed width and by making the WebView not collide in this region guarantees that there is a place where the mouse can go to scroll the content.

Flickable
{
    id: myScrollView
    anchors.fill: parent
    ScrollBar.vertical: ScrollBar { policy: ScrollBar.AlwaysOn; width: 20 }
    clip: true
    contentWidth: myWebEngineView.width
    contentHeight: myWebEngineView.height
    WebEngineView
    {
        id: myWebEngineView
        width: myScrollView.width - 20
        height: Math.max(contentsSize.height, 500)
        Component.onCompleted: url = "https://stackoverflow.com/questions/78632674/qml-webengineview-cant-be-scrolled-in-scrollview-flickable-too"
    }
}