Qml Flickable overwrite content

Question

I tried to enable scrolling of the content in my application using a Flickable. Now content is scrollable, but content hides the top content.

Code:

Flickable {
    anchors.top: pageMessagesHeader.bottom
    anchors.topMargin: 20

    boundsBehavior: Flickable.DragOverBounds
    contentHeight: contentItem.childrenRect.height
    contentWidth: contentItem.childrenRect.width
    height: 500
    width: 400
    ScrollBar.vertical: ScrollBar {}

    Rectangle {
        color: "white"
        height: 1000
        width: 400
        id: listMessages
    }

    }

Answer 1

Here you can find a sentence:

Flickable does not automatically clip its contents. If it is not used as a full-screen item, you should consider setting the clip property to true.

Which is the solution.

Just add

clip: true

to your code, and you'll be good.

Clipping has some perfomance disavantages which can greatly affect the application as it grows. Hence, its usage, especially outside the views scenario, should be evaluated carefully.