https://trello.com/c/GZwvrma5/55-scrollable-lists-should-have-scrollbars-that-come-into-view-when-hovering-over-that-area-the-extreme-right-of-the-list
parent
43c7920233
commit
d69870717f
@ -1,29 +1,56 @@
|
||||
import QtQuick 2.0
|
||||
|
||||
Rectangle {
|
||||
Item {
|
||||
id: scrollItem
|
||||
property var flickable
|
||||
property int yPos: 0
|
||||
width: 15
|
||||
z: 1
|
||||
|
||||
function flickableContentYChanged() {
|
||||
if(flickable === undefined)
|
||||
return
|
||||
|
||||
var t = flickable.height - height
|
||||
y = (flickable.contentY / (flickable.contentHeight - flickable.height)) * t + yPos
|
||||
var t = flickable.height - scroll.height
|
||||
scroll.y = (flickable.contentY / (flickable.contentHeight - flickable.height)) * t
|
||||
}
|
||||
|
||||
width: 15
|
||||
height: {
|
||||
var t = (flickable.height * flickable.height) / flickable.contentHeight
|
||||
return t < 20 ? 20 : t
|
||||
MouseArea {
|
||||
id: scrollArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
}
|
||||
z: 1; y: yPos
|
||||
color: "#DBDBDB"
|
||||
anchors.right: flickable.right
|
||||
opacity: flickable.moving ? 0.5 : 0
|
||||
visible: flickable.contentHeight > flickable.height
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation { duration: 100; easing.type: Easing.InQuad }
|
||||
|
||||
Rectangle {
|
||||
id: scroll
|
||||
|
||||
width: 15
|
||||
height: {
|
||||
var t = (flickable.height * flickable.height) / flickable.contentHeight
|
||||
return t < 20 ? 20 : t
|
||||
}
|
||||
y: 0; x: 0
|
||||
color: "#DBDBDB"
|
||||
opacity: flickable.moving || handleArea.pressed || scrollArea.containsMouse ? 0.5 : 0
|
||||
visible: flickable.contentHeight > flickable.height
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation { duration: 100; easing.type: Easing.InQuad }
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: handleArea
|
||||
anchors.fill: parent
|
||||
drag.target: scroll
|
||||
drag.axis: Drag.YAxis
|
||||
drag.minimumY: 0
|
||||
drag.maximumY: flickable.height - height
|
||||
propagateComposedEvents: true
|
||||
|
||||
onPositionChanged: {
|
||||
if(!pressed) return
|
||||
var dy = scroll.y / (flickable.height - scroll.height)
|
||||
flickable.contentY = (flickable.contentHeight - flickable.height) * dy
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 245 B |
After Width: | Height: | Size: 233 B |
Reference in new issue