QML MouseArea onWheel event not working properly when inside QML Scrollview

Question

I have a MouseArea inside a Scrollview inside a Rectangle. I implemented a zoom feature that zooms in/out when pressing ctrl and scrolling the mouse wheel. However, it only zooms in when the ScrollView is all the way at the top, and it only zooms out when the ScrollView is all the way at the bottom. There is some additional logic to handle external drag and drop of files. The issue should be able to be replicated as long as the text inside the TextEdit is big enough to get a ScrollView. Apparently this was a bug before, but I can't get it to work properly. I also tried the solution in the following link:

QtQuick2: Handle onWheel event inside of a ScrollView

Rectangle {
    id: palGenRectangle
    Layout.minimumWidth: 50
    property string display
    //width:800
    color: "white"

    ScrollView {
        id: palGenTextScrollView
        anchors.fill: parent

            MouseArea {
            id: mouseArea
            anchors.fill: parent
            onWheel: {
                if (wheel.modifiers & Qt.ControlModifier){
                    if (wheel.angleDelta.y > 0)
                    {
                        mainTextEdit.font.pixelSize++
                        console.log("+++++")
                    }
                    else
                    {
                        mainTextEdit.font.pixelSize--
                        console.log("-----")
                    }

                }
                else{
                    wheel.accepted=true
                }
            }
        }

        DropArea {
            anchors.fill: parent
            onEntered: {
                palGenRectangle.color = "light blue"
            }
            onExited: {
                palGenRectangle.color = "white"
            }
            onDropped: {
                palGenRectangle.color = "white"
            if (drop.hasText) {
                if (drop.proposedAction == Qt.MoveAction || drop.proposedAction == Qt.CopyAction) {
                    fileio.setPalFileTextFromFile(drop.text)
                    fileio.mainTextEdit = mainTextEdit.textDocument
                    drop.acceptProposedAction()
                }
            }
        }
    }
    Item {
        id: draggable
        anchors.fill: parent
        Drag.active: mouseArea.drag.active
        Drag.hotSpot.x: 0
        Drag.hotSpot.y: 0
        Drag.mimeData: { "text/plain": palGenRectangle.display }
        Drag.dragType: Drag.Automatic
        Drag.onDragStarted: 
        Drag.onDragFinished: {
            if (dropAction == Qt.MoveAction) {
                item.display = ""
            }
        }
    }


    TextEdit {
        id: mainTextEdit
        text: fileio.palFileText
        wrapMode: TextEdit.Wrap
        selectByMouse: true
        onTextChanged: {
            if (fileio.palFileText !== mainTextEdit.text)
                fileio.textIsModified = true
            else
                fileio.textIsModified = false
        }
    }
}

Answer 1

To make this answer more clear, extract the mouse area from your code to a ZoomArea component first:

//ZoomArea.qml
MouseArea {
    onWheel: {
        if (wheel.modifiers & Qt.ControlModifier){
            if (wheel.angleDelta.y > 0)
            {
                mainTextEdit.font.pixelSize++
            }
            else
            {
                mainTextEdit.font.pixelSize--
            }
            wheel.accepted=true
        }
        else{
            wheel.accepted=false
        }
    }
}

Note that the wheel.accepted is different from your code. It should accept the wheel event if zoom is triggered. Otherwise when it zooms, it scrolls too, which is quite weird.

In your code ZoomArea cannot work correctly since there are more than one content items being assigned to the ScrollView. In the example code of the fixed bug, there's only one Item. In other words, you can use an Item to wrap all components and add it to ScrollView:

ScrollView {
    id: palGenTextScrollView

    Item {
        id: mainTextContent
        width: mainTextEdit.paintedWidth
        height: mainTextEdit.paintedHeight

        ZoomArea {
            id: mouseArea
            anchors.fill: parent
        }
        DropArea {}
        Item { id: draggable}
        TextEdit { id: mainTextEdit}
    }
}

And it works when the mouse cursor is on text. However, if there's only one character in the TextEdit, zoom is not working if mouse cursor is on empty space within the view. To make it better, mainTextContent should fill the ScrollView:

ScrollView {
    id: palGenTextScrollView

    property int scrollBarWidth: 15
    anchors.fill: parent

    Item {
        id: mainTextContent
        width: Math.max(
            mainTextEdit.paintedWidth, 
            palGenTextScrollView.width - palGenTextScrollView.scrollBarWidth)
        height:Math.max(
            mainTextEdit.paintedHeight, 
            palGenTextScrollView.height - palGenTextScrollView.scrollBarWidth)

        ZoomArea{}
        //...
    }
}