I have a custom scrollbar QML type that I am working on. The problem I'm having is that if the scroll bar is all the way at the bottom of the page and the height of the main application window is increased, the translated contents stay in place and the size of the scroll bar is not updated. After this window resize occurs, clicking on the scroll bar causes the content to snap to its proper place and the scroll bar to snap to its proper size. What changes could be made to the code below so the position of the contents (red blocks) and scroll bar size update while the window height is changing, not afterwards when the scroll bar has been clicked again. To see the issue just open the code below, scroll the blue scroll bar all the way to the bottom, increase the height of the main window (observing the scroll bar size and the content position), and then click on the scroll bar after the resize. Here is my code:

main.qml

Qt Code: 
  1. import QtQuick 2.12
  2. import QtQuick.Window 2.12
  3. import QtQuick.Layouts 1.12
  4. import QtQuick.Shapes 1.15
  5.  
  6.  
  7. Window {
  8.     id: main_window
  9.     width: 640
  10.     height: 480
  11.     visible: true
  12.     title: qsTr("Hello World")
  13.     color: 'light blue'
  14.  
  15.     // container
  16.     ColumnLayout {
  17.         id: my_column
  18.         anchors.centerIn: parent
  19.         width: main_window.width / 3
  20.         height: main_window.height / 3
  21.         spacing: 0
  22.  
  23.         // contents
  24.         ColumnLayout {
  25.             id: repeater_element
  26.             Layout.fillWidth: true
  27.             Layout.fillHeight: false
  28.             spacing: 4
  29.             Repeater {
  30.                 model: 7
  31.                 Rectangle {
  32.                     Layout.fillWidth: true
  33.                     Layout.fillHeight: false
  34.                     Layout.preferredHeight: 75
  35.                     Layout.alignment: Qt.AlignTop
  36.                     color: 'red'
  37.                 }
  38.             }
  39.             transform: Translate {
  40.                 id: rect_translate
  41.                 y: 0
  42.             }
  43.         }
  44.     }
  45.  
  46.     // scroll bar type
  47.     Scroll_Bar {
  48.         x: 0
  49.         y: 0
  50.         height: parent.height
  51.         width: 20
  52.         container_element: my_column
  53.         content_element: repeater_element
  54.         translate_element: rect_translate
  55.         orientation: Qt.Vertical
  56.     }
  57.  
  58.     // just a border for the container element
  59.     Shape {
  60.         ShapePath {
  61.             strokeWidth: 4
  62.             strokeColor: "black"
  63.             fillColor: Qt.rgba(.09, .05, .86, 0)
  64.             joinStyle: ShapePath.MiterJoin
  65.             startX: my_column.x
  66.             startY: my_column.y
  67.  
  68.             PathLine {
  69.                 relativeX: my_column.width
  70.                 relativeY: 0
  71.             }
  72.  
  73.             PathLine {
  74.                 relativeX: 0
  75.                 relativeY: my_column.height
  76.             }
  77.  
  78.             PathLine {
  79.                 relativeX: -my_column.width
  80.                 relativeY: 0
  81.             }
  82.  
  83.             PathLine {
  84.                 relativeX: 0
  85.                 relativeY: -my_column.height
  86.             }
  87.         }
  88.     }
  89. }
To copy to clipboard, switch view to plain text mode 

Scroll_Bar.qml

Qt Code: 
  1. import QtQuick 2.0
  2. import QtQuick.Controls 2.5
  3.  
  4. ScrollBar {
  5.     property var container_element
  6.     property var content_element
  7.     property var translate_element
  8.  
  9.     QtObject {
  10.         id: internal
  11.         property real vertical_size: container_element.height / content_element.height
  12.         property real horizontal_size: container_element.width / content_element.width
  13.         property real off_the_bottom: (content_element.height - container_element.height) + translate_element.y
  14.     }
  15.  
  16.     id: scroll_bar_element
  17.     hoverEnabled: true
  18.     active: size
  19.     orientation: orientation
  20.     size: orientation === Qt.Vertical ? internal.vertical_size : internal.horizontal_size
  21.     padding: 0
  22.     contentItem: Rectangle {
  23.         id: ci
  24.         radius: 0
  25.         color: 'blue'
  26.     }
  27.  
  28.     onSizeChanged: {
  29.         if(size > 1){
  30.             visible = false
  31.         }
  32.         else{
  33.             visible = true
  34.         }
  35.     }
  36.  
  37.     onPositionChanged: {
  38.         if (orientation === Qt.Horizontal) {
  39.             translate_element.x = -scroll_bar_element.position * content_element.width
  40.         } else {
  41.             translate_element.y = -scroll_bar_element.position * content_element.height
  42.         }
  43.     }
  44.  
  45.     Component.onCompleted: {
  46.         scroll_bar_element.onPositionChanged()
  47.     }
  48. }
To copy to clipboard, switch view to plain text mode