Problems with scrollbar for QML textarea

JoeCFD

I got some piece of following code from
https://stackoverflow.com/questions/54524168/how-to-make-a-textarea-have-a-max-size-and-a-scroll-bar
it works. But I have a few issues with it after I added gutter to the scrollbar

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 400
    height: 400
    color: "#444"
    visible: true

    Rectangle {
        anchors.fill: flickable
    }

    Flickable {
        id: flickable
        width: parent.width
        height: Math.min(contentHeight, 300)
        contentWidth: width
        contentHeight: textArea.implicitHeight

        TextArea.flickable: TextArea {
            id: textArea
            text: qsTr("Hello, world! Hello, world! Hello, world! Hello, world! ")
            wrapMode: Text.WordWrap
        }

        ScrollBar.vertical: ScrollBar {
            id: scrollbar
            anchors.right: parent.right
            policy: Scrollbar.AsNeeded

           background: Rectangle {
                id: gutter
                width: 20
                color: "black" 
           }
        }
    }
}

I would prefer the gutter disappears if scrollbar is not needed. But it is on all the time.
Another problem is that scrollbar truncates or blocks my html text a bit.
How to keep scroll thumb always on if scroll bar is needed. It disappears when there is no scroll event.

JoeCFD

@JoeCFD solved the problem of scrollbar always on with

ScrollBar.vertical: ScrollBar {
            id: scrollbar
            anchors.right: parent.right
            policy: Scrollbar.AsNeeded
            visible: flickable.contentHeight > flickable.height

not sure why policy: Scrollbar.AsNeeded does not help.

JoeCFD

@JoeCFD solved the truncation problem with right padding in TextArea

rightPadding: scrollbar.implicitWidth

JoeCFD

@JoeCFD solved the problem of scrollbar always on with

ScrollBar.vertical: ScrollBar {
            id: scrollbar
            anchors.right: parent.right
            policy: Scrollbar.AsNeeded
            visible: flickable.contentHeight > flickable.height

not sure why policy: Scrollbar.AsNeeded does not help.