css - 如何使滚动捕捉以在 CSS 中的水平容器上自动滚动？

Question

我使用 scroll-snap 属性用 CSS 制作了一个滑块。但是我想让我的滑块每隔几秒钟自动滚动一次，但用户也应该能够来回滑动。到目前为止，用户可以来回滚动，但是当我使用@keyframes 添加动画时，当@keyframes 自动向前滚动时，用户无法返回滑块。

我有该项目的现场演示。我删除了自动滚动的@keyframes 动画。目前，它只能在移动设备中通过触摸滚动。或者，您可以使用笔记本电脑的触摸板滚动。

我想要做的是，我需要为我的滑块提供自动滚动功能，但我希望我的用户也能够在滑块中来回移动。感谢您对 Javascript 的任何帮助。（这可能是我将在我的项目中使用的唯一 JS。）

这是现场项目：https ://sametweb.github.io/daimahaberv3/ 我的主滑块是最大图像的滑块，页面上的第二行图像。

我使用了这个@keyframes 动画，但用户无法滚动滑块中的先前项目。

  0%,
  100% {
    transform: translateX(0);
  }
  9% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-100%);
  }
  19% {
    transform: translateX(-100%);
  }
  20% {
    transform: translateX(-200%);
  }
  29% {
    transform: translateX(-200%);
  }
  30% {
    transform: translateX(-300%);
  }
  39% {
    transform: translateX(-300%);
  }
  40% {
    transform: translateX(-400%);
  }
  49% {
    transform: translateX(-400%);
  }
  50% {
    transform: translateX(-500%);
  }
  59% {
    transform: translateX(-500%);
  }
  60% {
    transform: translateX(-600%);
  }
  69% {
    transform: translateX(-600%);
  }
  70% {
    transform: translateX(-700%);
  }
  79% {
    transform: translateX(-700%);
  }
  80% {
    transform: translateX(-800%);
  }
  89% {
    transform: translateX(-800%);
  }
  90% {
    transform: translateX(-900%);
  }
  99% {
    transform: translateX(-900%);
  }
}

我的滑块容器和滑块项 CSS：

.main-slider {
    .flex();
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    height: 100%;
    padding: 0 0 3rem 0;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
    .item {
      position: relative;
      display: inline-block;
      flex: 0 0 85%;
      margin: 0 2rem 0 0;
      scroll-snap-align: center;
      scroll-behavior: smooth;
    }
  }

我需要一个解决方案，要么解决@keyframes 滑动先前项目的问题，要么使用 Javascript 添加自动滚动行为。

标签： csssliderhorizontal-scrollingautoscrollscroll-snap