<p class="small">
Only tested in Edge, FireFox and Safari, please check browser support <a href="https://caniuse.com/#feat=css-snappoints" target="_blank">here</a>
</p>
<div class="mobile">
<main class="swipe-view">
<section class="green">
</section>
<section class="purple">
</section>
<section class="orange">
</section>
</main>
<nav>
Swipe Views
</nav>
</div>
.swipe-view {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-coordinate: 0 0;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: x mandatory;
flex: 1;
display:flex;
-webkit-overflow-scrolling: touch;
section {
width: 380px;
height: 100%;
flex:0 0 380px;
scroll-snap-align: start;
}
}
/******
*** DEMO STUFF, Ignore...
****/
nav {
background: #FFFFFF;
box-shadow: 0 -2px 3px 0 rgba(0,0,0,0.10);
bottom: 0;
height: 60px;
width: 100%;
align-items: center;
justify-content: center;
display:flex;
color: #FF8162;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 200;
}
p.small {
opacity: 0.6;
}
body {
background: #F2f2f2;
font-family: 'Maven Pro';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
h1 {
width: 100%;
text-align: center;
margin: 40px 0px;
}
}
.mobile {
width: 100%;
height: 90vh;
max-width: 380px;
margin: 0 auto;
background: #f9fbfc;
position: relative;
display: flex;
flex-direction: column;
}
.green {
background: #ABE66F;
}
.purple {
background: #4E4E94;
}
.orange {
background: #FD8F58;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.