html - 溢出 :hidden is not working in my slideshow project

Question

我正在尝试使用 CSS 动画创建幻灯片应用。我有一个包含 container 类的主容器，它包装了我网站上的所有内容。它有两个 div 元素 - 一个用于带有按钮的主页，单击它时会带您进入图像幻灯片(第二个 div 元素)。

我正在寻求有关幻灯片放映本身的帮助(类 banner 的 div 现在设置为 display: none)。我为 .slideshow-wrapper 设置了一个动画来改变它的 left 属性，这样它里面的图像就可以滑动了。它们通过 .slideshow-wrapper CSS 规则中的 display: flex 和 flex-direct: column 设置为彼此相邻。此外，每个幻灯片包装元素都将宽度和高度设置为视口(viewport)的 100%。

一切正常，但我不希望幻灯片页面的用户能够在图像之间滚动。当我在 .container 上设置 overflow: hidden 时，它不起作用，我不明白为什么。

另外，当我试图通过在 .slideshow-wrapper 中设置 overflow: hidden 来解决这个问题时，它并没有帮助——它从第一张图片滑到空白空间。为什么会这样？

这是 HTML 和 CSS 代码:

.container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner {
  display: none;
}

.slideshow-wrapper {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  animation: slideAnim 24s infinite;
}

@keyframes slideAnim {
  0% {
    left: 0
  }
  14% {
    left: 0
  }
  16% {
    left: -100vw
  }
  31% {
    left: -100vw
  }
  33% {
    left: -200vw
  }
  48% {
    left: -200vw
  }
  50% {
    left: -300vw
  }
  64% {
    left: -300vw
  }
  66% {
    left: -200vw
  }
  82% {
    left: -100vw
  }
  100% {
    left: 0%
  }
}

.slide {
  height: 100vh;
  min-width: 100vw;
  display: flex;
  align-items: center;
}

<div class="container">
  <div class="banner">
    <!-- main page with button -->
  </div>

  <div class="slideshow-wrapper">
    <div class="slide">
      <!-- content of the slide -->
    </div>

    <div class="slide">
      <!-- content of the slide -->
    </div>

    <div class="slide">
      <!-- content of the slide -->
    </div>

    <div class="slide">
      <!-- content of the slide -->
    </div>
  </div>
</div>

Answer 1

它不起作用，因为你是幻灯片放映包装器的绝对位置，你可以取下该位置集并将其左侧填充从 0 更改为减去任何你想要的内容，使溢出隐藏到容器中