qt - QML MouseArea onWheel event not working properly when inside QML Scrollview -

i have mousearea inside scrollview inside rectangle. implemented zoom feature zooms in/out when pressing ctrl , scrolling mouse wheel. however, zooms in when scrollview way @ top, , zooms out when scrollview way @ bottom. there additional logic handle external drag , drop of files. issue should able replicated long text inside textedit big enough scrollview. apparently bug before, can't work properly. tried solution in following link:

qtquick2: handle onwheel event inside of 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         }     } } 

to make answer more clear, extract mouse area code 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 wheel.accepted different code. should accept wheel event if zoom triggered. otherwise when zooms, scrolls too, quite weird.

in code zoomarea cannot work correctly since there more 1 content items being assigned scrollview. in example code of fixed bug, there's 1 item. in other words, can use item wrap components , add 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 works when mouse cursor on text. however, if there's 1 character in textedit, zoom not working if mouse cursor on empty space within view. make better, maintextcontent should fill 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{}         //...     } }