QML Alphabet Scrolling indicator POC

scrolling-indicator.qml

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    ListView {
        id: listView
        anchors.fill: parent
        model: ["Adan Gula","Alexandria Armand","Alverta Gorney","Annalisa Dixion","Arlene Drapeau","Ashely Euler","Ashleigh Terry","Audra Vannorman","Bibi Fraire", "Branda Melgoza","Breanna Rotenberry","Brigette Delk","Bruno Raso","Calandra Dudney","Carrol Dedeaux","Celina Bichrest","Celinda Frutos","Celsa Moen","Charise Milan","Corazon Burrus","Coreen Dehner","Coretta Stillwell","Cornell Fierros","Deedee Ruggerio","Demetrice Mcclaren","Desiree Marcano","Dimple Harig","Divina Fahie","Don Thill","Ellena Fredrick","Elmo Routh","Elsie Raulerson","Ervin Bardsley","Estela Alverson","Eufemia Sheely","Fawn Opie","Fred Ralphs","Genevie Spires","Genna Quin","Gerri Aden","Gianna Shears","Gilda Doyel","Glady Peguero","Guy Sondag","Herschel Flowers","Hilda Hamm","Hiroko Mccarley","Jackeline Millington","Jacqualine Twiss","Jacquelyne Worsley","Janelle Broman","Jani Reddish","Jasper Krone","Jene Gump","Jimmie Cooley","Kellye Wiest","Kristie Jules","Kymberly Moodie","Latesha Netter","Lavelle Lasala","Lesli Czapla","Lorette Prescott","Lorie Hoeft","Lyndia Schwalm","Mable Marron","Marcelino Spence","Marcie Yopp","Margrett Spagnuolo","Maris Ruff","Marvella Bowlby","Mauro Winberg","Maybelle Chute","Meghan Burts","Micah Hoggan","Mireille Eastin","Mitsue Ohler","Monica Mccall","Morris Cappel","Myong Bale","Nannie Poore","Noella Gledhill","Ofelia Bane","Phoebe Bui","Quincy Sweeting","Raguel Ross","Raymundo Headlee","Ressie Helt","Rikki Gilligan","Roselee Swain","Shanda Ballew","Stephine Dimauro","Tamesha Roop","Temple Mcbain","Tiesha Crumley","Tova Kiel","Wade Fossum","Willodean Ferguson","Winfred High","Winter Furrow","Yvone Edge"]
        delegate: ItemDelegate {
            width: parent.width
            contentItem: Label {
                text: modelData
            }
        }
        section {
            property: "modelData"
            criteria: ViewSection.FirstCharacter
        }
        ScrollBar.vertical: ScrollBar {
            id: scrollBar
            Rectangle {
                visible: scrollBar.pressed
                color: "#1976D2"
                width: 96
                height: width
                radius: width/2
                x: -width - 16
                y: Math.max(scrollBar.position * scrollBar.height - height + scrollBar.contentItem.height/2, 0)
                Rectangle {
                    width: parent.width/2
                    height: parent.height/2
                    x: width
                    y: height
                    color: parent.color
                }
                Label {
                    anchors.centerIn: parent
                    color: "White"
                    font.bold: true
                    font.pixelSize: 40
                    property Item topItem: listView.itemAt(0, listView.contentY)
                    property Item topItemFix: topItem ? topItem: listView.contentItem.children[0]
                    text: topItemFix.ListView.section
                }
            }
        }
    }
}