Bounds of Flickable.contentY in QML

Question

What is the correct way of asking the bounds of Flickable.contentY? I need that for a scrollbar.

Experimentally I have discovered that

offsetY <= contentY <= offsetY + contentHeight - height

where offsetY can be calculated as

var offsetY = contentY-Math.round(visibleArea.yPosition*contentHeight)

offsetY is zero at the start of the application and seems to be constant unless Flickable is resized.

This formula works in general, but there probably should be a dedicated function for it.

Answer 1

I did a scrollbar easily without offset :

// ScrollBar.qml
import QtQuick 2.0

Rectangle {
    id: scrollbar;
    color: "#3C3C3C";
    visible: (flicker.visibleArea.heightRatio < 1.0);
    property Flickable flicker : null;
    width: 20;
    anchors {
        top: flicker.top;
        right: flicker.right;
        bottom: flicker.bottom;
    }

    Rectangle {
        id: handle;
        height: (scrollbar.height * flicker.visibleArea.heightRatio);
        color: "#5E5E5E";
        border {
            width: 1;
            color: "white";
        }
        anchors {
            left: parent.left;
            right: parent.right;
        }

        Binding { // Calculate handle's x/y position based on the content position of the Flickable
            target: handle;
            property: "y";
            value: (flicker.visibleArea.yPosition * scrollbar.height);
            when: (!dragger.drag.active);
        }
        Binding { // Calculate Flickable content position based on the handle x/y position
            target: flicker;
            property: "contentY";
            value: (handle.y / scrollbar.height * flicker.contentHeight);
            when: (dragger.drag.active);
        }
        MouseArea {
            id: dragger;
            anchors.fill: parent;
            drag {
                target: handle;
                minimumX: handle.x;
                maximumX: handle.x;
                minimumY: 0;
                maximumY: (scrollbar.height - handle.height);
                axis: Drag.YAxis;
            }
        }
    }
}

Just use it like this :

Flickable {
    id: myFlick;
}
ScrollBar { 
    flicker: myFlick;
}

It can be moved with mouse, and moves automatically when Flickable is scrolled.