防止溢出：隐藏裁剪图像

我现在正在轮播一个旋转木马，仿照Facebook的F8照片旋转木马底部的their page。防止溢出：隐藏裁剪图像

我的旋转木马结构基本相同：

<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：隐藏在容器上，以将传送带限制为页面宽度，因此当它滚动到屏幕末端时，div的其余部分会被裁剪。

要水平滚动轮播，我设置一个时间间隔并使用transform：translateX（）将其每隔几ms移动一个像素。

我怎样才能让它不裁剪图像，但也不允许用户横向滚过屏幕尺寸？

来源

2017-03-02 Chang Liu

请更新您的问题，以便它显示[最小，完整和可验证的示例]中的所有相关代码（http://stackoverflow.com/help/mcve）。我们不可能在没有看到它的情况下修复你的CSS。 –

@ObsidianAge嘿，对不起，我只是用样式更新了我的问题 –

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

我通过将容器元素设置为两个图像的整个宽度来固定它，然后将其封装在另一个溢出的容器元素中：hidden和width：100％。

来源

2017-03-02 09:33:52

防止溢出：隐藏裁剪图像

回答

相关问题