Javascript 旋转木马，当父元素垂直滚动移动时，允许水平滚动结束移动

我创建了一个类似于Instagram上正在运行的旋转木马，但我意识到，如果在子元素的滚动x结束之前移动父元素的滚动y，它将不会结束

下面的例子的gif

注：对不起，英语不好，不是我的母语

代码

.container{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
溢出y：滚动；
.x{
边缘顶部：30px；
显示器：flex；
溢出-x：滚动；
滚动捕捉类型：x必填；
div{
flex:0自动；
滚动捕捉对齐：开始；
宽度：100vw；
高度：100vw；
}
.x-项目1{
背景：绿色；
}
.x-项目2{
背景：蓝色；
}
}
}

... 其他部门

我相信这是预期的行为；在一个方向上滚动会中断在另一个方向上的滚动，甚至滚动被Scroll Snap CSS属性声明为manditory

如果您不喜欢这种行为，可以使用基于JS的动画以编程方式水平滚动容器，因为这不会受到垂直滚动的影响

---

很抱歉，我无法提供更多帮助。

我找到了一个解决方案，在我看来，它满足了我的建议，同时又不损失功能的性能

我只是觉得scrollIntoView可能会有延迟，比如“行为：平滑”

但是如果有人想增加改进，那就没用了，谢谢

在容器中我放了一个“onTouchStart”

---

您认为如何最好地实现此旋转木马？在我提到作为参考的instagram上，他结束了这场运动。。。有没有一种方法可以使卷轴独立？除了使用我描述的JS或CSS动画之外，我不知道还有什么方法可以使它们独立。我将slick库（使用CSS动画）用于我的站点上的旋转木马：

<Container className="works" onTouchStart={() => handleCarousel()} >
  <div className="x">
    <div className="x-item1" />
    <div className="x-item2" />
  </div>

  ... other divs
</Container>

const handleCarousel = () => {
    const works = Array.from(document.querySelectorAll('.work-content'));
    const carousels = Array.from(document.querySelectorAll('.work-carousel'));
    carousels.forEach(carousel => {
      if (carousel.scrollLeft % window.innerWidth !== 0) {
        const item = document.querySelector(
          `.work-content:nth-child(${
            works.indexOf(carousel.parentElement) + 1
          }) > div.work-carousel > img.work-carousel-item-active`, 
        ); // in another function I already control which image is being viewed and add this class
        const scroll = document.querySelector('.works').scrollTop; // optional: get vertical scroll value
        item.scrollIntoView(); // horizontal scrolling gains focus
        document.querySelector('.works').scrollTop = scroll; // optional: returns vertical scroll value
      }
    });
  };