防止 overflow:hidden 裁剪图像

Question

我现在正在制作轮播，仿照 their page 底部的 Facebook F8 照片轮播。

我的轮播结构基本相同：

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
</div>

对于 SCSS 我有

.container {
  width: 100%;
  position: relative;
  height: 450px;
  overflow: hidden;
  div {
    position: absolute;
    top: 0;
    width: 1400px;
    display: inline-block;
    background-position: center;
    background-size: 1400px 450px;
    background: url('...');
    height: 100%;
  }
  &:nth-child(2) { left: 1400px; }
}

容器内的嵌套子div都大于屏幕宽度，我想水平滚动它们。但是，我在容器上设置了 overflow:hidden 以将轮播限制为页面的宽度，因此当它滚动到我的屏幕末尾时， div 的其余部分将被裁剪。

为了水平滚动轮播，我设置了一个间隔并使用 transform: translateX() 每隔几毫秒将其移动几个像素。

我怎样才能让它既不裁剪图像又不允许用户横向滚动超过屏幕尺寸？

Answer 1

jk 愚蠢的错误，我正在翻译容器元素。

我通过使容器元素成为两个图像的整个宽度，然后将其包含在另一个具有 overflow: hidden 和 width: 100% 的容器元素中来修复它。

防止 overflow:hidden 裁剪图像

Preventing overflow:hidden from cropping the image

css

sass

overflow