防止溢出：隱藏裁剪圖像

我現在正在輪播一個旋轉木馬，仿照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

防止溢出：隱藏裁剪圖像

回答

相關問題