QML ScrollView does not remove default ScrollBar when using custom ScrollBar. Why? How to solve this?

Question

Using QML 5.15, a ScrollView with a custom ScrollBar will not hide the default scrollbar. See image, the white dot upper right. How can this be solved?

The source:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
  id: window

  width: 640
  height: 480
  visible: true
  title: qsTr("Hello ScrolView and ScrollBar")
  color: "blue"

  ScrollView {
    id: scroll_view
    width: parent.width - 40
    height: parent.height

    TextInput {
      id: text_input
      anchors.fill: parent
      text: "A very large text but this will be enough to get the picture."
      color: "white"
      readOnly: true
      selectByMouse: true
      width: parent.width
      height: parent.height
    }
    ScrollBar.vertical: ScrollBar {
      policy: "AlwaysOn"
      parent: scroll_view
      x: text_input.width
      width: 20
      height: scroll_view.availableHeight
    }
  }
}

Using policy AlwaysOff hides the custom scrollbar but not the default scrollbar.

Answer 1

Unlike other components (e.g. Flickable, ListView) ScrollView has an instantiated ScrollBar already assigned to ScrollBar.vertical. Rather than attempting to replace it with a new ScrollBar, you should merely customize the one that's already there. i.e. instead of

ScrollBar.vertical: ScrollBar {
    policy: "AlwaysOn"
    parent: scroll_view
    x: text_input.width
    width: 20
    height: scroll_view.availableHeight
}

do

ScrollBar.vertical {
    policy: "AlwaysOn"
    //parent: scroll_view
    x: text_input.width
    width: 20
    //height: scroll_view.availableHeight
}

Because you're customizing the existing one, you do not need to set parent and height either.

Answer 2

To resume and post the results using the tip by Stephen Quan:

With the following code I got the square custom scollbars without the leftover artifacts. And by using the TextEdit I can select and copy text inside.

The horizontal scrollbar has for the background two rectangles. The first is to cover the lower right corner. When this is not done, the text will be seen here when scrolling.

The scrollbars are at the position of the original scrollbars.

The overall rectangle is used to clip the area otherwise the text is visible outside when scrolling.

The rather large text line in the TextEdit is just there for demonstration purpose.

I am happy with the result.

Thank everyone who have helped.

( I do not understand why the editor does not take all of my code as code )

import QtQuick 2.12

import QtQuick.Window 2.12 import QtQuick.Controls 2.12

Window { id: window

width: 640 height: 480 visible: true title: qsTr("Hello ScrolView and ScrollBar") color: "gray"

readonly property int scrollbarsize: 40

Rectangle { x: scrollbarsize y: scrollbarsize width: parent.width - (2 * scrollbarsize) height: parent.height - (2* scrollbarsize) color: "black" clip: true

ScrollView {
  id: scroll_view
  width: parent.width
  height: parent.height
  rightPadding: scrollbarsize
  bottomPadding: scrollbarsize

  TextEdit {
    id: text_input
    text: "Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Stop\nLine 2\nLine 3\nline 4\nline 5\n6\n7\n8\n9\nThe end\nLine 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - \nLine 2\nLine 3\nline 4\nline 5\n6\n7\n8\n9\nThe end\nLine 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - \nLine 2\nLine 3\nline 4\nline 5\n6\n7\n8\n9\nThe end\nLine 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - \nLine 2\nLine 3\nline 4\nline 5\n6\n7\n8\n9\nThe end\nLine 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - \nLine 2\nLine 3\nline 4\nline 5\n6\n7\n8\n9\nThe end\nLine 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - \nLine 2\nLine 3\nline 4\nline 5\n6\n7\n8\n9\nThe end\nLine 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - \nLine 2\nLine 3\nline 4\nline 5\n6\n7\n8\n9\nThe end\nLine 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - \nLine 2\nLine 3\nline 4\nline 5\n6\n7\n8\n9\nThe end\nLine 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - Line 1 - \nLine 2\nLine 3\nline 4\nline 5\n6\n7\n8\n9\nThe end\n"
    color: "white"
    readOnly: true
    selectByMouse: true
  }

  ScrollBar.vertical {
    orientation: Qt.Vertical
    width: scrollbarsize
    height: scroll_view.height - scrollbarsize
    contentItem: Rectangle {
      radius: 0
      color: "red"
    }
    background: Rectangle {
      width: scrollbarsize
      height: scroll_view.height - scrollbarsize
      color: "green"
    }
  }
  ScrollBar.horizontal {
    orientation: Qt.Horizontal
    height: scrollbarsize
    contentItem: Rectangle {
      radius: 0
      color: "yellow"
    }
    background: Rectangle {
      height: scrollbarsize
      width: scroll_view.width
      color: "lightgray"
      Rectangle {
        width: scroll_view.width - scrollbarsize
        height: scrollbarsize
        color: "green"
      }
    }
  }
}

} }

Found a related question here: Styling QtQuick2 ScrollView results in visible artifacts