轮播，当父元素垂直滚动移动时让水平滚动结束移动

Question

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

下面示例的 gif ...

注意：抱歉英语不好，不是我的母语。

代码

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  .x {
    margin-top: 30px;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    div {
      flex: 0 0 auto;
      scroll-snap-align: start;
      width: 100vw;
      height: 100vw;
    }
    .x-item1 {
      background: green;
    }
    .x-item2 {
      background: blue;
    }
  }
}

<Container>
  <div className="x">
    <div className="x-item1" />
    <div className="x-item2" />
  </div>

  ... other divs
</Container>

--->> Example Gif !! <<---

Answer 1

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

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

抱歉，我帮不上忙了。

Answer 2

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

我只是认为 scrollIntoView 可能会有延迟，例如“行为：平滑”...

https://developer.mozilla.org/pt-BR/docs/Web/API/Element/scrollIntoView

但如果有人想添加改进，它不起作用，谢谢。

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

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

  ... other divs
</Container>

函数 handleCarousel...

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

轮播，当父元素垂直滚动移动时让水平滚动结束移动

carousel, let horizontal scrolling end movement when parent element vertical scrolling is moved

html

javascript

carousel

reactjs