How to detect scroll event on a TableView in qml?

Question

How can we on a TableView from QtQuick.Controls 2.2 detect a scroll event?

For exemple when i scroll down vertically i want to detect that event with something like onVerticalDown or something similar…

In attachment i provide na exemple of what i'm implementing:

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.1

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    width: 300
    ListModel {
        id: libraryModel
        ListElement {
            title: "A Masterpiece"
            author: "Gabriel"
        }
        ListElement {
            title: "Brilliance"
            author: "Jens"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
    }

    Page {
        id: page
        anchors.fill: parent

        TableView{
            id:table
            anchors{
                top:parent.top
                topMargin:10
                left:parent.left
                right:parent.right
                bottom:parent.bottom
            }
            style: TableViewStyle{
                backgroundColor : "white"
                textColor: "white"
                highlightedTextColor: "white"
                handle: Rectangle {
                    implicitWidth: 30
                    implicitHeight: 30
                    color:  "black"
                }
            }
            model: libraryModel
            headerDelegate: Rectangle{
                id:recHeader
                width:styleData.width+20
                height:30
                color:"blue"
                border.color: "black"
                border.width: 1
                Text {
                    anchors.fill:parent
                    text:styleData.value
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
            itemDelegate: Rectangle {
                border.color:"black"
                border.width: 1
                Text
                {
                  text: styleData.value
                  elide: Text.ElideRight
                }
            }
            Component.onCompleted: {
                showcolumn1()
            }

            TableViewColumn {
                id: col1
                role: "title"
                title: "Title"
            }

            TableViewColumn {
                role: "author"
                title: "Authors of this tutorial"
            }
        }
    }
}

When we run it's like this:

Now i scroll down and i want to detect it:

How can this be done?

Answer 1

You can access the scroll position on the flickableItem.contentY property:

TableView {
    flickableItem.onContentYChanged: console.log("scrolled:", flickableItem.contentY)
    // ...
}