body { | |
margin: 0; | |
} | |
#scroller { | |
position: absolute; | |
width: 400px; | |
height: 400px; | |
overflow: scroll; | |
padding: 0; | |
scroll-snap-type: both mandatory; | |
} | |
.snap { | |
position: absolute; | |
width: 200px; | |
height: 200px; | |
background-color: blue; | |
scroll-snap-align: start; | |
} | |
#space { | |
position: absolute; | |
width: 1000px; | |
height: 1000px; | |
} | |
.left { | |
left: 0; | |
} | |
.top { | |
top: 0; | |
} | |
.right { | |
left: 400px; | |
} | |
.bottom { | |
top: 400px; | |
} |