KonvaJS - Attach fixed scrollbar to element with dynamic height

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();
)


1 Answer
1

First, you may need to identify how far your left scrollbar is scrolled. I used progress variable (0 <= progress <= 1):

progress

progress

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:

y

y

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:

y

minY

maxY

progress

var y = minY + (1 - progress) * (maxY - minY);
products.y(y);


Demo: https://jsfiddle.net/ehtro20j/

minY

var minY = verticalBarBottom.y() + verticalBarBottom.height() - products.getClientRect( relativeTo: stage).height;

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.