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

Question

我需要制作一个这样的电视指南：

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

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

仅使用CSS是否有可能？由于性能，我宁愿不使用JS来解决这个问题。

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

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;
}

<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>

你们能帮我吗？

非常感谢！

更新：

我还需要一个不带位置粘滞的解决方案，因为IE不支持此解决方案。下面的Maharkus的答案是正确的，但在IE中不起作用。

Answer 1

这是一个类似的例子。我使用position:sticky进行滚动，它允许在栏本身固定在适当位置的同时滚动内容：

body {
  margin: 0;
}

.wrap {
  position: relative;
}

.timeline {
  background: grey;
  height: 60px;
  width: 1000px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.grid {
  background: linear-gradient(to bottom right, #ffffff, #000000);
  width: 1000px;
  position: relative;
  height: 600px;
}

.channellist {
  height: 100%;
  background: darkgrey;
  position: sticky;
  left: 0;
  width: 100px;
}

<div class="wrap">
  <div class="timeline">Timeline</div>
  <div class="grid">
    <div class="channellist">
    Channellist
    </div>
  </div>
</div>