<style>

.page {

    /* Defines the top center of each page as the

       coordinate that should be used for snapping */

    scroll-snap-coordinate: 50% 0;

     height: 100px;

}

.docScroller {

    width: 500px;

    height: 230px;

    overflow-x: hidden;

    overflow-y: auto;

    /* Specifies that each element’s snap coordinate should

       align with the center of the scroll container, offset

       a short distance from the top edge. */

    scroll-snap-destination: 50% 100px;

     /* Encourages scrolling to end at a snap point when the

        operation completes, if it is near a snap point */

    scroll-snap-type: proximity;

}

​

</style>

​

<div class="docScroller">

    <div class="page" style="background-color: red">Page 1</div>

    <div class="page" style="background-color: green">Page 2</div>

    <div class="page" style="background-color: orange">Page 3</div>

    <div class="page" style="background-color: yellow">Page 4</div>

    <div class="page" style="background-color: red">Page 5</div>

    <div class="page" style="background-color: green">Page 6</div>

    <div class="page" style="background-color: orange">Page 7</div>

    <div class="page" style="background-color: yellow">Page 8</div>

</div>