Search code examples
csswebkitmobile-safari

Webkit Overflow Scrolling Snap to elements

Using the new -webkit-overflow-scrolling:touch technique, is it possible to get it to snap to elements to.

EG:: this to snap to the images

.gallery {
    width:960px;
    height:600px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}
img {
    width:800px;
    height:600px;
    float:left;
}

<div class="gallery">
    <img src="101.jpg"/>
    <img src="101.jpg"/>
    <img src="101.jpg"/>
    <img src="101.jpg"/>
    <img src="101.jpg"/>
    <img src="101.jpg"/>
    <img src="101.jpg"/>
    <img src="101.jpg"/>
    <img src="101.jpg"/>
    <img src="101.jpg"/>
</div>
Solution

  • -webkit-overflow-scrolling: touch; just tells iOS and other mobile browsers (not sure if there are any more mobile Webkit-based browsers) that the list is scrollable via touch. It doesn't define behavior.

    You'll need to implement a solution in JS.