Help with scrollbar functionallity

Question

hi! I don't understand very well the behavior to scrollbar. For example! I have a rectangle and a scrollbar in the scene. I want that if you drag this rectangle then scrollbar be updated, and if you click in the scrollbar then updates a visible screen.
what variables are changed? how should I use scrollbar variables?
thanks
var startX=100.0;
var startY=100.0;
var rec:Rectangle=Rectangle {
x: bind startX, y: bind startY
width: 140, height: 90
fill: Color.GREEN
onMousePressed: function( e: MouseEvent ):Void {
startX=e.sceneX-rec.translateX;
startY=e.sceneY-rec.translateY;
onMouseDragged: function( e: MouseEvent ):Void {
var tx=e.sceneX-startX;
var ty=e.sceneY-startY;
rec.translateX=tx;
rec.translateY=ty;
var scroll:ScrollBar=ScrollBar {
min: 1
max: 10
vertical: false
blockIncrement:16
width:1000
height:300
unitIncrement:0.05
Stage {
title: "Application title"
width: 1200
height:950
scene: Scene {
content: [rec,scroll
}

Answer 1

hi! I leave the code I'm doing. I want that when I drag the rectangle to the right of the screen, with the help of the scroll, making the area visible on the right. Making a scroll of the screen. The code is as follows:
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.input.MouseEvent;
import javafx.scene.control.ScrollBar;
var anchura=1200;
var startX=250.0;
var startY=250.0;
var rec:Rectangle=Rectangle {
x: bind startX, y: bind startY
width: 140, height: 90
fill: Color.GREEN
onMousePressed: function( e: MouseEvent ):Void {
startX=e.sceneX-rec.translateX;
startY=e.sceneY-rec.translateY;
onMouseDragged: function( e: MouseEvent ):Void {
var tx=e.sceneX-startX;
var ty=e.sceneY-startY;
rec.translateX=tx;
rec.translateY=ty;
if (e.sceneX>anchura){
scroll.blockIncrement;
var scroll:ScrollBar=ScrollBar {
translateX:25
translateY:100
min: 0
max: 1200
vertical: false
blockIncrement:16
width:bind anchura-50
scaleY:2.0
unitIncrement:0.05
value:bind rec.x+rec.translateX
clickToPosition:false
Stage {
title: "Application title"
width: bind anchura
height:900
scene: Scene {
content: [rec,scroll
}