KineticJS：在固定舞台上模拟滚动的有效方法

Question

我有一个页面布局方式非常类似于你可以如何布置锦标赛支架，有三个面板，在一个设置高度的包装div中。两个绿色面板是标准的HTML列表，使用overflow-y: scroll，以便可以上下滚动它们。白色面板是KineticJS舞台，不会滚动。

每个水平蓝线“附加”到其中一个列表中的LI。当用户向下滚动列表，并且LI向上移动（并且可能在视图之外）时，水平线需要与它们“向上移动”，并且垂直蓝线需要做同样的操作，以给出它们的幻觉滚动也是如此。红色圆圈固定在中心位置。

现在，基于我对HTML5 Canvases和KineticJS的有限知识，我似乎需要添加一个.scroll()事件处理程序来调整行上的点，并重新绘制图层。

我的问题是：这是实现这种效果的最有效方法，如果没有，我应该怎么做呢？

Answer 1

就像所有游戏一样。

创建2个“额外”动力组，每组包含一组左水平+左垂直和右水平+右垂直线。

将新组“放置在画布上方和下方”（让我们将其称为起始位置）。

当新列表项从顶部/底部滚动到视图中时，也会将相应的新组滚动到视图中。

在任何列表项滚动离开屏幕后，再次在该场外滚动该“额外”组。

这是关键......当任何“额外”小组离开舞台时，你会将所有内容都设置回它的起始位置。

这会产生无限括号线的错觉。