垂直可滚动元素保持水平固定

Question

我已经阅读了关于这个主题的一些内容并且有一个“可行的”解决方案，但是，我想知道是否有更清洁，更少的紧张的方式来完成这个。我有一个“表”，实际上有几个filterBy元素作为表。我有一个标题ul在垂直滚动时保持固定在顶部，但在水平滚动期间与主体滚动。我想要完成的是让一个“冻结”的左列始终固定在左侧，用于水平卷轴上的窗口，但垂直滚动其各自的内容行。正如我上面所说，我有一个使用javascript的工作版本，但在触摸设备，（表面专业版，iPad mini）它使“冻结列”紧张而不是一个漂亮的流畅运动。单击并拖动水平滚动条时，可以实现所需的效果，但我希望在可能的情况下适用于所有情况。

这是一个jsfiddle，其中包含一个基本的工作示例。再次在大多数设备上都能完美运行，而不是我能说出的启用触控功能。当连接到外接显示器时，我的表面专业工作正常但是当只使用表面专业时，它再次感到紧张。

欢迎任何想法或想法。

Answer 1

你可能总是有两个列表，其中一个是固定的（比如绝对定位）在左边，另一个实际上是一个可滚动的容器，有边距，等于左边的面板宽度，占据剩下的空间，里面是你的可滚动的内容将放在一边。

Check this fiddle

.left {
  position: absolute; width: 100px;
}

.right { /* scrollable */
  width: 300px; overflow: scroll;
}

（容器css需要优化，当然，我只是试图显示“一般”的想法）

希望它有所帮助...