ScrollView does not remove the default ScrollBar when using a custom one

Question

Using Qt 5.15, a ScrollView with a custom ScrollBar will not hide the default scrollbar. See the image, the white dot, in the upper right corner.

How can this be solved?

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

Here are the results after 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.

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"
          }
        }
      }
    }
  }
}

---

Related question: Styling QtQuick2 ScrollView results in visible artifacts

Answer 2

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.