在基于视图时间线的动画滚动上应用滚动捕捉类型

Question

TL;DR:在这个jsfiddlehttps://jsfiddle.net/kLp728xw/中，我不仅想在垂直滚动上应用scroll-snap，而且还想在数字1~的水平滚动上应用scroll-snap显示 5。

---

我想对使用 @keyframes 水平动画的内容（如幻灯片）沿视图时间轴应用滚动捕捉效果。 jsfiddle 的水平滚动部分代码如下所示。 我只是尝试像平常一样添加

scroll-snap-type: mandatory

、

overflow: scroll

和

scroll-snap-align: start

，但无法正常工作。

首先这可能吗？如果没有，你们能想到使用 JavaScript 的任何解决方法吗？ （例如我想知道我可以利用IntersectionObserver。）

我想要的基线是“混合滚动” - 如小提琴、垂直和水平混合滚动所示 - 带有滚动捕捉。如果当前的 jsfiddle 代码已经走向死胡同，我很想知道如何从头开始实现零基础。

<!-- HTML -->
<div class="section pin">
  <div class="sticky">
    <div class="slides">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>
</div>

/* CSS */
.section.pin {
  height: 500vh;

  view-timeline-name: --section-pin;
  view-timeline-axis: block;
}

.sticky {
  height: 100vh;
  width: 100vw;
  position: sticky;
  top: 0;
}

.slides {
  height: 100vh;
  width: 400vw;

  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;

  animation: horizontalScroll linear both;
  animation-timeline: --section-pin;
  animation-range: contain 0%;
}

@keyframes horizontalScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.item {
  width: 100vw;
  min-width: 100vw;
  height: 100vh;
}

Answer 1

最终在带有滚动捕捉的垂直滚动容器中出现了不可见的元素。