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

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

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

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

仅使用CSS就可以做到这一点吗？由于性能原因，我不希望使用JS来解决这个问题

我试着制作两个滚动容器，一个水平，一个垂直，但我只能正确地获得一个先决条件。 这是密码笔：

正文{
背景色：#333；
}
.第页{
宽度：1000px；
高度：1000px；
保证金：0自动；
位置：相对位置；
溢出：隐藏；
}
霍克斯勒先生{
宽度：1000px；
溢出-x：滚动；
溢出y：隐藏；
位置：相对位置；
}
.计时器{
背景色：红色；
宽度：5000px；
高度：50px；
位置：绝对位置；
排名：0；
}
.卷轴{
宽度：5000px；
高度：100vh；
溢出x：隐藏；
溢出y：滚动；
位置：相对位置；
边缘顶部：50px；
}
.频道列表{
背景颜色：绿色；
宽度：200px；
高度：10000px；
位置：绝对位置；
排名：0；
左：0；
}
.内容{
宽度：5000px；
高度：10000px；
左边距：200px；
背景色：青色；
}

时间线
频道列表
网格

下面是一个这样的例子。我使用了

position:sticky

进行滚动，允许内容在条本身固定的位置上滚动：

正文{
保证金：0；
}
.包裹{
位置：相对位置；
}
.时间表{
背景：灰色；
高度：60px；
宽度：1000px；
位置：粘性；
排名：0；
z指数：1；
}
.电网{
背景：线性渐变（右下角，#ffffff，#000000）；
宽度：1000px；
位置：相对位置；
高度：600px；
}
.频道列表{
身高：100%；
背景：darkgrey；
位置：粘性；
左：0；
宽度：100px；
}

时间线
频道列表

如果您不想在javascript中使用javascript，为什么要在问题中添加javascript标记。这将简单地吸引javascript程序员？Thx这确实有效，但IE中不支持position sticky。有没有一种方法可以解决这一问题，并且可以在每个浏览器中使用？嗯，我真的想不出另一种CSS唯一的方法来实现这一点。老实说，我不再支持IE做我的工作了。我想你不会在这一次使用几行JS。你是个幸运的家伙：p不幸的是，我仍然必须支持IE。谢谢你的努力！