滑翔元素水平在觸摸設備上

Question

我建立類似Netflix的隊列，在那裏我創建的項目的線延伸通過視

.row { 
 
    overflow:scroll; 
 
} 
 

 
.slider { 
 
    height: 100px; 
 
    white-space: nowrap; 
 
} 
 

 
.square { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin-right: 10px; 
 
    display: inline-block; 
 
}

<div class="row"> 
 
    <div class="slider"> 
 
     <div class="square">Foo</div> 
 
     <div class="square">Foo</div> 
 
     <div class="square">Foo</div> 
 
     <div class="square">Foo</div> 
 
     ...

此作品不夠好，但能夠輕彈我的平板電腦上的物品並使物品行滑動並減緩摩擦，這將是件好事。我已經能夠通過使用iframe在垂直方向實現這種效果，但我不知道如何在水平方向上獲得類似的效果。

一個CSS解決方案將是理想的，但也會採用Javascript解決方案。

https://jsfiddle.net/

Answer 1

移動Safari瀏覽器有這個CSS屬性-webkit-overflow-scrolling: touch 這使滾動容器，你所談論的動量效應。 我目前不知道任何其他實現此功能的瀏覽器。

Momentum Scrolling on iOS Overflow Elements