Css 当Y轴滚动时，收割台保持在顶部，但在X轴滚动时会自然动作

我如何才能使第一行的蓝色方块在滚动Y轴时粘在顶部，而在滚动X轴时则表现自然？我阅读了有关sticky的文档和几篇文章，但我不知道如何在这种情况下正确地应用它

.grid{
显示：网格；
网格模板行：重复（9，1fr）；
网格间距：5px；
溢出：自动；
}
.行{
高度：100px；
显示：网格；
网格模板列：重复（20，1fr）；
网格模板行：100px；
网格间距：5px；
}
.盒子{
宽度：100px；
高度：自动；
边界：1倍深红色点；
}
.第一排.包厢{
边框：1px点蓝色；
}
.第一排{
位置：粘性；
排名：0；
}

---

您应该使用网格上的滚动条。从

html，body

中删除滚动，并将

高度：100vh

添加到

.grid

html，
身体{
溢出：隐藏；
}
.电网{
显示：网格；
网格模板行：重复（9，1fr）；
网格间距：5px；
溢出：自动；
高度：100vh；
}
.行{
高度：100px；
显示：网格；
网格模板列：重复（20，1fr）；
网格模板行：100px；
网格间距：5px；
}
.盒子{
宽度：100px；
高度：自动；
边界：1倍深红色点；
}
.第一排.包厢{
边框：1px点蓝色；
}
.第一排{
位置：粘性；
排名：0；
}

---

从.grid中删除覆盖流：自动