我正在开发一个网站项目，需要绘制一条时间轴，其中包含行和信息（类似于甘特图）。基本上以下几点很重要：
- 用户可以在时间轴上向左或向右滚动。
- 时间轴可以在垂直方向上滚动（浏览行）。
- 行的名称始终显示在行本身上。
为了澄清事情，我创建了以下杰作艺术：
我们可以看到红色的时间轴和行，行名在左侧（橙色），行上的条目为蓝色。因此，将时间轴向右滚动会产生以下结果：
在水平和垂直可滚动的容器中保持项目在同一水平位置的最佳实践是什么？当通过行进行垂直滚动时，橙色块也应该随之滚动。
但是！你到底尝试了什么？
我尝试了一些方法，但没有找到完美的解决方案：
1）更改左侧属性
我尝试使用JavaScript更改橙色块的CSS“left”属性，在水平移动时（使用Translate()改变位置没有改变太多）。这在Chrome上效果很好，但在IE上（我仍然不明白为什么人们使用它），它非常缓慢，并且位置更新明显可见。如果您拿起滚动条并疯狂滚动，您可以看到橙色框从左到右飞行。这使我想到了以下想法：
2）你！出去！
我为橙色方框创建了一个单独的容器元素，并将其放置在时间轴外部，给它设置了绝对位置并放置在时间轴顶部，这样无论用户是否滚动时间轴，它都会保持在那里。结果：外观没有任何变化，左右滚动完美运作，因为我不必设置橙色方框的左侧位置。但是...该解决方案可能适用于水平滚动，但在垂直滚动时，橙色方框不知道时间轴的垂直位置，因此该解决方案的缺点包括：
- 必须使用JavaScript设置橙色方框的垂直滚动位置。
- 在IE上垂直滚动有些卡顿（但比第一种解决方案更流畅和不那么烦人）。
- （次要）两个容器的高度必须相同，这意味着需要设置高度（如果需要）必须进行两次。
我希望您能够帮助我！