ScrollView to the left of the screen in qml

Question

I am trying to put scrollview to the leftside of a ListView in qml

import QtQuick 2.0
import QtQuick.Controls 1.4

Item {

    width: 1580 
    height: 687 

    Rectangle
    {
        anchors.fill: parent
        color: "Gray"
    }

    ListModel
    {
        id: phonecontactsModel

        ListElement {
            // name :firstname+" "+lastname
            firstname:"Alexander"
            lastname:"Wurz"
            contactimg: "graphics/Phone/contacts/contact_pic1.png"
            contactimgSq: ""
            phonenum:"02476 000 001"
            favstatus:0
        }

        ListElement{
            //name:firstname+" "+lastname
            firstname:"Bernie"
            lastname:"Ecclestone"
            contactimg:"graphics/Phone/contacts/contact_pic1.png"
            contactimgSq: "graphics/Phone/contacts/contact_pic1.png"
            phonenum:"02476 000 002"
            favstatus:1
        }
        ListElement{
            //name:firstname+" "+lastname
            firstname:"Bernie"
            lastname:"Ecclestone"
            contactimg:"graphics/Phone/contacts/contact_pic1.png"
            contactimgSq: "graphics/Phone/contacts/contact_pic1.png"
            phonenum:"02476 000 002"
            favstatus:1
        }
        ListElement{
            //name:firstname+" "+lastname
            firstname:"Bernie"
            lastname:"Ecclestone"
            contactimg:"graphics/Phone/contacts/contact_pic1.png"
            contactimgSq: "graphics/Phone/contacts/contact_pic1.png"
            phonenum:"02476 000 002"
            favstatus:1
        }
        ListElement{
            //name:firstname+" "+lastname
            firstname:"Bernie"
            lastname:"Ecclestone"
            contactimg:"graphics/Phone/contacts/contact_pic1.png"
            contactimgSq: "graphics/Phone/contacts/contact_pic1.png"
            phonenum:"02476 000 002"
            favstatus:1
        }
        ListElement{
            //name:firstname+" "+lastname
            firstname:"Bernie"
            lastname:"Ecclestone"
            contactimg:"graphics/Phone/contacts/contact_pic1.png"
            contactimgSq: "graphics/Phone/contacts/contact_pic1.png"
            phonenum:"02476 000 002"
            favstatus:1
        }
        ListElement{
            //name:firstname+" "+lastname
            firstname:"Bernie"
            lastname:"Ecclestone"
            contactimg:"graphics/Phone/contacts/contact_pic1.png"
            contactimgSq: "graphics/Phone/contacts/contact_pic1.png"
            phonenum:"02476 000 002"
            favstatus:1
        }
        ListElement{
            //name:firstname+" "+lastname
            firstname:"Bernie"
            lastname:"Ecclestone"
            contactimg:"graphics/Phone/contacts/contact_pic1.png"
            contactimgSq: "graphics/Phone/contacts/contact_pic1.png"
            phonenum:"02476 000 002"
            favstatus:1
        }
    }

    ScrollView {
        id: id_scrollView
        anchors.fill: parent
        objectName: "ScrollView"
        frameVisible: true
        highlightOnFocus: true
    ListView
    {
        height: parent.height
        width: parent.width
        model: phonecontactsModel
        delegate: contacts_delegate
        spacing: 6 
        anchors.left: parent.left
        anchors.leftMargin: 360 
        clip: true

    }
}


    Component
    {
        id: contacts_delegate

        Item {
            id: wrapper
            height: 150 
            width: 1080 

            Rectangle
            {
                color: "#99000000"
                height: parent.height
                width: parent.width -150
            }


            Image {
                width: parent.height
                height: parent.height
                id: contactImage
                source: contactimg
                fillMode: Image.PreserveAspectFit
                anchors.left: parent.left
            }

            Text {
                id: contactName
                text: firstname
                anchors.left: contactImage.right
                anchors.leftMargin: 70  
                color: "White"
                font.pointSize: 25  
                anchors.verticalCenter: parent.verticalCenter
            }

            Image {
                id: messageContact
                source: "graphics/Phone/messaging_icon.png"
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
            }



        }
    }
}

I cannot specify the scrollview width or height or the position it to the left of the view how can i achieve this

I am trying to create something like this

Answer 1

If what I guess is right, you can use the QtQuick.Controls 2.0 ScrollBar instead of using a scrollview.

e.g:

ListView {
    id: lview
    anchors.right: parent.right
    width: 300
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    model: 100
    delegate: Rectangle { width: 300; height: 50; border.color: 'grey' }
    spacing: 6

    ScrollBar.vertical: ScrollBar {
        anchors.right: lview.left
        width: 50
        active: true
        background: Item {
            Rectangle {
                anchors.centerIn: parent
                height: parent.height
                width: parent.width * 0.2
                color: 'grey'
                radius: width / 2
            }
        }

        contentItem: Rectangle {
            radius: width / 3
            color: 'yellow'
        }
    }
}

You can customize this ScrollBar to your liking.
See here: http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-scrollbar