<!DOCTYPE HTML>
<html>
    <head>
        <style>
            .horizontalGallery {
                width: 600vw;
                height: 100vh;
                margin: 0;
                padding: 0;
                scroll-snap-type: x mandatory;
            }
            .colorBox {
                height: 100vh;
                width: 100vw;
                float: left;
                scroll-snap-align: start;
            }
            #item0 { background-color: red; }
            #item1 { background-color: green; }
            #item2 { background-color: blue; }
            #item3 { background-color: aqua; }
            #item4 { background-color: yellow; }
            #item5 { background-color: fuchsia; }
        </style>
    </head>
    <body class="horizontalGallery">
        <div id="item0" class="colorBox"></div>
        <div id="item1" class="colorBox"></div>
        <div id="item2" class="colorBox"></div>
        <div id="item3" class="colorBox"></div>
        <div id="item4" class="colorBox"></div>
        <div id="item5" class="colorBox"></div>
    </body>
</html>