我有一个页面的布局方式与您在具有设定高度的包装器 div 内布置具有三个面板的锦标赛括号的方式非常相似。两个绿色面板是标准 HTML 列表，带有overflow-y: scroll, 所以它们可以上下滚动。白色面板是 KineticJS 舞台，不会滚动。
每条水平蓝线都“附加”到其中一个列表中的 LI。当用户向下滚动列表时，LI 向上移动（并且可能超出视野），水平线需要与它们一起“移动”，而垂直蓝线也需要这样做，以产生它们的错觉也在滚动。红色圆圈固定在中心。
现在，基于我对 HTML5 Canvases 和 KineticJS 的有限知识，我似乎需要添加一个.scroll()事件处理程序来调整线上的点并重绘图层。
我的问题是：这是实现这种效果的最有效方法吗？如果不是，我应该怎么做？
