JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<div class="container" id="skrollr-body">
        <div>
            <div               
            class="box1"
            data-smooth-scrolling="off"
            data-0="left:0px;"
            data-250="left:0px;"
            data-500="left:0px;"
            data-750="left:0px;"
            data-1000="left:0px;"              
            ></div>
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
</div>

CSS

body{
            width: 1000px;
            height: 100%;
            float: left;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background: silver;
        }
        .container,  .container > div{
            width: 5000px;
            height: 200px;
            float: left;
            top:0px;
            left:0px;
            position:absolute;
        }
        .container .box1{
            width: 100%;
            height: 100px;
            float: left;
            background: red;
            position:absolute;
            top:0px;
            left:0px;
        }
        .container .box2{
            width: 100%;
            height: 100px;
            float: left;
            top:0px;
            left:300px;
            background: yellow;
            position:absolute;
        }
        .container .box3{
            width: 100%;
            height: 100px;
            float: left;
            top:0px;
            left:600px;
            background: blue;
            position:absolute;
        }

JavaScript

skrollr.init({
    forceHeight: true,
    smoothScrolling:true
});