JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

HTML

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<div id='text'></div>
<div id="skrollr-body">
    <div id="test" class='test' data-top-bottom="background-color:rgb(0,0,255);" data-bottom-top="background-color:rgb(255,0,0);">element1</div>
    <div id="test" class='test' data-top-bottom="background-color:rgb(1,1,1);" data-bottom-top="background-color:rgb(255,0,0);">element2</div>
     <div id="test" class='test' data-top-bottom="background-color:rgb(1,1,1);" data-bottom-top="background-color:rgb(255,0,0);">element2</div>
     <div id="test" class='test' data-top-bottom="background-color:rgb(1,1,1);" data-bottom-top="background-color:rgb(255,0,0);">element2</div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}
#skrollr-body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}
#text {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 20px;
    z-index: 9999;
}
#test {
    width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
}

JavaScript

var s = skrollr.init({
    mobileDeceleration: 0.001,
    smoothScrolling: true,
    forceHeight: true,
    render: function (e) {
        progress = e.curTop / e.maxTop;
        document.getElementById('text').innerHTML = progress;
    }
});