KonvaJS - Attach fixed scrollbar to element with dynamic height - konvajs

Question

Please assist, i have created dynamic content and i need attach scrollbar to it.
Main goal: when scroller reach to bottom my dynamic content bottom must be synchronized with it. (bottom of color boxes must be inline with the scroller)
Scroller size must be the same and don't change height.
How it will be work: if we have 12 boxes for example, slow speed will be used while scroller reach from top to bottom. if 30 boxes for example, it will be faster and so on...
i think so...
Maybe you provide a better solution.
"create dynamic elements layer" section creates color boxes, please check with different quantity
Thank you
jsFiddle
/* move scrollbar and dynamic elements */
verticalBar.on('dragmove', function (e) {
if (verticalBar.x() != verticalBarBottom.x()) {
verticalBar.x(verticalBarBottom.x())
}
if (verticalBar.y() < verticalBarBottom.y()) {
verticalBar.y(verticalBarBottom.y());
}
if (verticalBar.y() > verticalBarBottom.y() + verticalBarBottom.height() - verticalBar.height()) {
verticalBar.y(verticalBarBottom.y() + verticalBarBottom.height() - verticalBar.height());
}
productsOffset = verticalBar.y() - verticalBarBottom.y();
productsStep = products.getClientRect().height / verticalBarBottom.height();
productsStep = products.getClientRect().height / (verticalBarBottom.y() + verticalBarBottom.height());
newYpos = verticalBarBottom.y() - productPadding;
newYpos -= productsOffset * productsStep;
products.y(newYpos);
products.draw();
})

Answer 1

First, you may need to identify how far your left scrollbar is scrolled. I used progress variable (0 <= progress <= 1):
var progress = (verticalBar.y() - verticalBarBottom.y()) / (verticalBarBottom.height() - verticalBar.height());
Then you may need to identify what is min y and max y that layer may take to fit into you required view:
var minY = verticalBarBottom.y() + verticalBarBottom.height() - products.getClientRect().height;
var maxY = verticalBarBottom.y();
You may need to adjust these variables of your use case.
So real y is just somewhere between minY and maxY adjusted by progress:
var y = minY + (1 - progress) * (maxY - minY);
products.y(y);
Demo: https://jsfiddle.net/ehtro20j/