KonvaJS - 将固定滚动条附加到具有动态高度的元素

Question

请协助，我已创建动态内容，我需要附加滚动条。主要目标：当滚动条到达底部时，我的动态内容底部必须与其同步。 （颜色框底部必须与滚动条内联）滚动条尺寸必须相同且不要更改高度。

如何工作：例如，如果我们有12个盒子，当卷轴从上到下时，将使用慢速。例如30盒，它会更快等等...我想是的......也许你提供了一个更好的解决方案。

“创建动态元素图层”部分创建颜色框，请检查不同的数量

谢谢

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

首先，您可能需要确定左滚动条的滚动距离。我使用了progress变量（0 <= progress <= 1）：

var progress =  (verticalBar.y() - verticalBarBottom.y()) / (verticalBarBottom.height() - verticalBar.height());

然后你可能需要确定什么是min y和max y该层可能适合你所需的视图：

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

   var maxY = verticalBarBottom.y();

您可能需要调整用例的这些变量。

所以真正的y恰好位于由minY调整的maxY和progress之间：

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

但是：ぁzxswい