Css 如何一次锁定一个方向的滚动捕捉？

我创建了一个日历，它在一列中显示每天，并且每天都有多行。我还将滚动捕捉添加到网格中。因此，用户可以水平滑动以查看每天。但是，由于天数下的行数，滑动（移动）在两个方向（垂直和水平）移动。我希望它能锁定刷向一个方向。因此，当用户水平滑动时，日移动，一旦日网格捕捉到位，他们可以垂直滚动，或者水平滚动（如果他们愿意）。这是我的演示：

CSS和HTML

*，
：之后，
：之前{
框大小：边框框；
填充：0；
保证金：0；
}
html{
字体大小：62.5%；
}
身体{
颜色：384ad2；
-moz osx字体平滑：灰度；
-webkit字体平滑：抗锯齿；
字体大小：1.6rem；
身高：100%；
字体系列：arial；
}
a{
文字装饰：无；
颜色：继承；
}
身体{
背景：#ccc；
}
.日历{
最大高度：100vh；
最大宽度：100vh；
显示：网格；
网格模板列：重复（980VW）；
栅柱间隙：20px；
滚动捕捉类型：x必填；
左：5vw；
转换：转换0.2s缓进输出；
溢出-x：滚动；
对正内容：左；
}
.天{
边缘底部：100px；
最小宽度：0；
滚动捕捉对齐：居中；
}
.第h2天{
字体大小：1.5rem；
字号：900；
字母间距：0.1rem；
文本对齐：左对齐；
文本转换：大写；
保证金：1rem 0；
}
.卡片{
显示：网格；
网格行间距：6px；
栅柱间隙：24px；
网格模板列：重复（自动拟合，最小值（280px，1fr））；
证明内容：中心；
最小宽度：0；
}
.卡片{
背景：#fff；
边界半径：5px；
盒影：0 4px 6px rgba（49,54,68,0.05），
0 5px20px rgba（49,54,68,0.08）；
最大高度：65px；
边缘底部：24px；
位置：相对位置；
过渡：框阴影0.6s缓变，颜色0.2s缓变，
转换0.2s的输入输出；
}
.卡：悬停{
盒影：0 4px 6px rgba（138、155、198、0.05），
0 5px25pxRGBA（821121940.15）；
}
.卡：悬停。荧光灯{
不透明度：1；
}
.卡a{
显示：网格；
网格模板列：50px自动；
}
.内容{
填充：10px 14px；
位置：相对位置；
边框：1px纯红；
最小宽度：0；
}
.头衔{
字体大小：1.4rem；
字号：800；
溢出：隐藏；
垫底：3件；
文本溢出：省略号；
空白：nowrap；
}
.晾晒{
字体大小：1.3rem；
字号：600；
不透明度：0.9；
}
下一个
.现在{
背景：蓝色；
边界半径：4px；
顶部：-14px；
颜色：白色；
字号：1.1rem；
字号：800；
填充：3px8px；
位置：绝对位置；
右：-12px；
}
.形象{
边界半径：4px 0 0 4px；
身高：100%；
最大高度：65px；
对象匹配：覆盖；
对象位置：中心；
过渡：不透明度0.3s；
宽度：100%；
}

星期一
星期一
星期一
星期一
星期一