垂直固定项目和水平固定项目在同一滚动容器中

Question

我需要制作几乎完全像这样的电视指南： tv guide

• 如果用户在指南中水平滚动，则时间栏应滚动，但频道列表应保持固定。

• 如果用户在指南中垂直滚动，则时间栏应保持固定，但频道列表应滚动。

仅使用CSS是否有可能？我宁愿不使用JS来解决此问题，因为这会很迟钝/浮躁。

我试图制作2个滚动容器，其中1个是水平容器，而1个是垂直容器，但我只能正确地获得其中的1个先决条件。 这是CodePen：CodePen

HTML：

<div class="page">
  <div class="horscroll">
    <div class="timebar">timeline</div>
    <div class="vertscroll">
      <div class="channel-list">channel list</div>
      <div class="content">grid</div>
    </div>
  </div>
</div>

CSS：

body {
  background-color: #333;
}

.page {
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.horscroll {
  width: 1000px;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
}

.timebar {
  background-color: red;
  width: 5000px;
  height: 50px;
  position: absolute;
  top: 0;
}

.vertscroll {
  width: 5000px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  margin-top: 50px;
}

.channel-list {
  background-color: green;
  width: 200px;
  height: 10000px;
  position: absolute;
  top: 0;
  left: 0;
}

.content {
  width: 5000px;
  height: 10000px;
  margin-left: 200px;
  background-color: cyan;
}

你们能帮我吗？

非常感谢！