溢出隱藏隱藏在一個方向全貌，而不是其他

Question

這是我的代碼（見小提琴here）：

img { 
    width: 200px; 
    height: 200px; 
} 

.image-container { 
    width: 600px; 
    height: 200px; 
    overflow: hidden; 
} 

我有大量的圖片，所有200像素的平方，在image-container。溢出的圖像被隱藏。

當我將圖像滑動到左側時，最左側的圖像以平滑的方式消失。

當我將圖像滑動到右側時，最右側的圖像並不是以平滑的方式消失。相反，它在一瞬間消失。

爲什麼左右行爲之間存在差異？我怎樣才能在雙方都有一個流暢的動畫？

Answer 1

我建議white-space:nowrap

 img { 
    width: 200px; 
    height: 200px; 
} 
.image-container { 
    white-space:nowrap; 
    height: 200px; 
} 
#wrapper { 
    width: 600px; 
    height: 200px; 
    overflow: hidden; 
} 

看到演示的位置：http://jsfiddle.net/pavloschris/bsjnq/3/

Answer 2

這是因爲你的圖像容器不夠寬，圖像下降到下一行，但溢出隱藏。

看到這個jsFiddle example。

將圖像容器包裝到包裝中，使用當前圖像容器上的CSS，並將圖像容器與所有圖像合併在一起（在我的示例中爲4000px）。

.image-container { 
    width: 4000px; 
    height: 200px; 
} 
#wrapper { 
    width: 600px; 
    height: 200px; 
    overflow: hidden; 
}