Mister Epic Mister Epic - 19 days ago 11
Javascript Question

Glide elements horizontally on touch devices

I'm building something like a Netflix queue, where I create a line of items that extend past the viewport



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





This works well enough, but it would be nice to be able to flick through the items on my tablet and get the row of items to glide and slow down with friction. I've been able to achieve that effect in the past vertically by employing iframes, but I don't know how I can get something similar horizontally.

A CSS solution would be ideal, but would take a Javascript solution as well.

https://jsfiddle.net/

Answer

Mobile safari has this css property -webkit-overflow-scrolling: touch which gives scrollable containers the momentum effect you are talking about. I currently don't know of any other browser implementing this feature.

Momentum Scrolling on iOS Overflow Elements