snap scroll

by Saksham Malhotra

HTML

<div class="snapContainer">
        <div class="snapItem">

        </div>
        <div class="snapItem">

        </div>
        <div class="snapItem">

        </div>
        <div class="snapItem">

        </div>
        <div class="snapItem">

        </div>
    </div>

CSS

#contentBox {
            margin-left: 0;
        }

        #sideNavBox {
            display: none;
        }

        .snapContainer {
            height: 500px;
            width: 100vw;
            white-space: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .snapItem {
            width: 91vw;
            margin: 0 1.5vw;
            height: 100%;
            display: inline-block;
            scroll-snap-align: center;
        }

        .snapItem:nth-child(1) {
            background-color: #81ecec;
            margin-left:6vw;
        }

        .snapItem:nth-child(2) {
            background-color: #00cec9;
        }

        .snapItem:nth-child(3) {
            background-color: #fab1a0;
        }

        .snapItem:nth-child(4) {
            background-color: #b2bec3;
        }

        .snapItem:nth-child(5) {
            background-color: #ffeaa7;
             margin-right:6vw;
        }

         ::-webkit-scrollbar {
            display: none;
        }