Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Clicking on the background of a ScrollView?



  • Hi,

    I have a QML ScrollView, with a flickable area inside of it that has a single Item inside of it. That item manages it's own size - so there is often an area of the background visible on screen.

    In my full code, the item itself has other Rectangles and MouseAreas as children, and they all work fine, I can click them, drag them, etc.

    I want to be able to perform an action when I click on the background of the scroll view, but I cannot make that work.

    The following is a simple example is what I am trying to do. The red rectangle is the flickable item, the background is a green rectangle. The mouse area on the red rectangle works, but I cannot click the green rectangle.

    Am I missing something obvious here?

    I have tried a number of combinations of preventStealing, propagateComposedEvents.

    import QtQuick 2.0
    import QtQuick.Controls 2.3
    
    Item {
    	ScrollView {
    		anchors.fill: parent
    		ScrollBar.horizontal.policy: ScrollBar.AsNeeded
       		ScrollBar.vertical.policy: ScrollBar.AsNeeded
    
       		background: Rectangle {
       			color: "#00FF00"
       			MouseArea {
    				anchors.fill: parent
    				preventStealing: true
    				onClicked: {
    					console.debug("Clicked background!");
    				}
      			}
    		}
    
    		Flickable {
    			clip: true
    
    			Rectangle {
    				color: "#FF0000"
    				width: 5000
    				height: 200
    
    				MouseArea {
    					anchors.fill: parent
    					onClicked: {
    						console.debug("Clicked Red!");
    					}
    				}
    			}
    		}
    	}
    }