ScrollBar QML Type Vertical or horizontal interactive scroll bar. More...  
 Import Statement:
 import QtQuick.Controls 2.2


 Since:
 Qt 5.7


 Inherits:
 Control 


 List of all members, including inherited members  Properties  
active : bool 
interactive : bool 
orientation : enumeration 
policy : enumeration 
position : real 
pressed : bool 
size : real 
snapMode : enumeration 
stepSize : real  Attached Properties  
horizontal : ScrollBar 
vertical : ScrollBar  Methods  void decrease() void increase()  Detailed Description
      
ScrollBar is an interactive bar that can be used to scroll to a specific position. A scroll bar can be either vertical or horizontal, and can be attached to any Flickable, such as ListView and GridView. Flickable {
    // ...
    ScrollBar.vertical: ScrollBar { }
} Attaching ScrollBar to a Flickable When ScrollBar is attached vertically or horizontally to a Flickable, its geometry and the following properties are automatically set and updated as appropriate:  orientation position size active  An attached ScrollBar re-parents itself to the target Flickable. A vertically attached ScrollBar resizes itself to the height of the Flickable, and positions itself to either side of it based on the layout direction. A horizontally attached ScrollBar resizes itself to the width of the Flickable, and positions itself to the bottom. The automatic geometry management can be disabled by specifying another parent for the attached ScrollBar. This can be useful, for example, if the ScrollBar should be placed outside a clipping Flickable. This is demonstrated by the following example: Flickable {
    id: flickable
    clip: true
    // ...
    ScrollBar.vertical: ScrollBar {
        parent: flickable.parent
        anchors.top: flickable.top
        anchors.left: flickable.right
        anchors.bottom: flickable.bottom
    }
} Notice that ScrollBar does not filter key events of the Flickable it is attached to. The following example illustrates how to implement scrolling with up and down keys: Flickable {
    focus: true

    Keys.onUpPressed: scrollBar.decrease()
    Keys.onDownPressed: scrollBar.increase()

    ScrollBar.vertical: ScrollBar { id: scrollBar }
} Binding the Active State of Horizontal and Vertical Scroll Bars Horizontal and vertical scroll bars do not share the active state with each other by default. In order to keep both bars visible whilst scrolling to either direction, establish a two-way binding between the active states as presented by the following example: Flickable {
    anchors.fill: parent

    contentWidth: parent.width * 2
    contentHeight: parent.height * 2

    ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }
    ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }
} Non-attached Scroll Bars It is possible to create an instance of ScrollBar without using the attached property API. This is useful when the behavior of the attached scoll bar is not sufficient or a Flickable is not in use. In the following example, horizontal and vertical scroll bars are used to scroll over the text without using Flickable: Rectangle {
    id: frame
    clip: true
    width: 160
    height: 160
    border.color: "black"
    anchors.centerIn: parent

    Text {
        id: content
        text: "ABC"
        font.pixelSize: 160
        x: -hbar.position * width
        y: -vbar.position * height
    }

    ScrollBar {
        id: vbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Vertical
        size: frame.height / content.height
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }

    ScrollBar {
        id: hbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Horizontal
        size: frame.width / content.width
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
} 
When using a non-attached ScrollBar, the following must be done manually:  Layout the scroll bar (with the x and y or anchor properties, for example). Set the size and position properties to determine the size and position of the scroll bar in relation to the scrolled item. Set the active property to determine when the scroll bar will be visible.  See also ScrollIndicator, Customizing ScrollBar, and Indicator Controls. Property Documentation  active : bool
This property holds whether the scroll bar is active, i.e. when it's pressed or the attached Flickable is moving. It is possible to keep both horizontal and vertical bars visible while scrolling in either direction. This property is automatically set when the scroll bar is attached to a flickable.  interactive : bool
This property holds whether the scroll bar is interactive. The default value is true. A non-interactive scroll bar is visually and behaviorally similar to ScrollIndicator. This property is useful for switching between typical mouse- and touch-orientated UIs with interactive and non-interactive scroll bars, respectively. This QML property was introduced in QtQuick.Controls 2.2 (Qt 5.9).  orientation : enumeration
This property holds the orientation of the scroll bar. Possible values: 

Constant
Description
 
Qt.Horizontal
Horizontal
 
Qt.Vertical
Vertical (default)
  This property is automatically set when the scroll bar is attached to a flickable.  policy : enumeration
This property holds the policy of the scroll bar. The default policy is ScrollBar.AsNeeded. Possible values: 

Constant
Description
 
ScrollBar.AsNeeded
The scroll bar is only shown when the content is too large to fit.
 
ScrollBar.AlwaysOff
The scroll bar is never shown.
 
ScrollBar.AlwaysOn
The scroll bar is always shown.
  The following example keeps the vertical scroll bar always visible: Flickable {
    contentHeight: 2000
    ScrollBar.vertical: ScrollBar {
        policy: ScrollBar.AlwaysOn
    }
} This QML property was introduced in QtQuick.Controls 2.2 (Qt 5.9).  position : real
This property holds the position of the scroll bar, scaled to 0.0 - 1.0. This property is automatically set when the scroll bar is attached to a flickable. See also Flickabl8b7c:f320:99b9:690f:4595:cd17:293a:c069visibleArea.  pressed : bool
This property holds whether the scroll bar is pressed.  size : real
This property holds the size of the scroll bar, scaled to 0.0 - 1.0. This property is automatically set when the scroll bar is attached to a flickable. See also Flickabl8b7c:f320:99b9:690f:4595:cd17:293a:c069visibleArea.  snapMode : enumeration
This property holds the snap mode. Possible values: 

Constant
Description
 
ScrollBar.NoSnap
The scrollbar does not snap (default).
 
ScrollBar.SnapAlways
The scrollbar snaps while dragged.
 
ScrollBar.SnapOnRelease
The scrollbar does not snap while being dragged, but only after released.
  In the following table, the various modes are illustrated with animations. The movement and the stepSize (0.25) are identical in each animation.   
Value
Example
 
ScrollBar.NoSnap

      

 
ScrollBar.SnapAlways

      

 
ScrollBar.SnapOnRelease

      

  This QML property was introduced in QtQuick.Controls 2.2 (Qt 5.9). See also stepSize.  stepSize : real
This property holds the step size. The default value is 0.0. See also snapMode, increase(), and decrease(). Attached Property Documentation  ScrollBar.horizontal : ScrollBar
This property attaches a horizontal scroll bar to a Flickable. Flickable {
    contentWidth: 2000
    ScrollBar.horizontal: ScrollBar { }
} See also Attaching ScrollBar to a Flickable.  ScrollBar.vertical : ScrollBar
This property attaches a vertical scroll bar to a Flickable. Flickable {
    contentHeight: 2000
    ScrollBar.vertical: ScrollBar { }
} See also Attaching ScrollBar to a Flickable. Method Documentation  void decrease()
Decreases the position by stepSize or 0.1 if stepSize is 0.0. See also stepSize.  void increase()
Increases the position by stepSize or 0.1 if stepSize is 0.0. See also stepSize.

    
{'path': 'public/docs/qt~5.9/qml-qtquick-controls2-scrollbar.html', 'source': 'DevDocs.IO'}