Glide элементы горизонтально на сенсорных устройствах

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> 
 
     ...

Это работает достаточно хорошо, но было бы неплохо иметь возможность пролистывать предметы на моем планшете и получать ряд предметов, чтобы скользить и замедляться с трением. Я смог достичь этого эффекта в прошлом вертикально, используя iframes, но я не знаю, как я могу получить что-то подобное по горизонтали.

Решение на основе CSS было бы идеальным, но также принимало бы решение Javascript.

https://jsfiddle.net/

Answer 1

Mobile Safari имеет это свойство CSS -webkit-overflow-scrolling: touch который дает SCROLLABLE контейнеры импульс эффект вы говорите. В настоящее время я не знаю ни одного другого браузера, реализующего эту функцию.

Momentum Scrolling on iOS Overflow Elements