JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://markdalgleish.com/projects/stellar.js/js/stellar.js"></script>
<div id="container">
    <div id="main">
        <div id="scene-one" class="frame" data-stellar-offset-parent="true">
            <div id="one" class="object" data-stellar-ratio="1.5"></div>
            <div id="two" class="object" data-stellar-ratio="1.15"></div>
            <div id="three" class="object" data-stellar-ratio="1.1"></div>
            <div id="four" class="object" data-stellar-ratio="1.05"></div>
            <div id="five" class="object" data-stellar-ratio="1"></div>
            <div id="six" class="object" data-stellar-ratio=".9"></div>
            <div id="seven" class="object" data-stellar-ratio="1.2"></div>
            <div id="eight" class="object" data-stellar-ratio="1.3"></div>
            <div id="nine" class="object" data-stellar-ratio="1.1"></div>
            <div id="go-up" class="object">
                 <h1>1 THIS SHOULD NOW START SCROLLING UP With Parallax</h1>

                 <h2>With vertical scroll bar, going up</h2>

                 <h2>Or with mouse wheel movement</h2>

                 <h2>Or with edge scrolling, but with mouse to the top of the viewport</h2>

                 <h1>2 THIS SHOULD NOW START SCROLLING UP With Parallax</h1>

                 <h2>With vertical scroll bar, going up</h2>

                 <h2>Or with mouse wheel movement</h2>

                 <h2>Or with edge scrolling, but with mouse to the top of the viewport</h2>

                 <h1>3 THIS SHOULD NOW START SCROLLING UP With Parallax</h1>

                 <h2>With vertical scroll bar, going up</h2>

                 <h2>Or with mouse wheel movement</h2>

                 <h2>Or with edge scrolling, but with mouse to the top of the viewport</h2>

                 <h1>4 THIS SHOULD NOW START SCROLLING UP With Parallax</h1>

                 <h2>With vertical scroll bar, going up</h2>

                 <h2>Or with mouse wheel movement</h2>

                 <h2>Or...

CSS

#scroller {
    overflow-x: scroll;
    overflow-y: hidden;
    max-width: 600px;
    width: 100%;
    margin: 0px auto;
    position: relative;
    top: -1px;
}
#scrollfiller {
    width: 10px;
    min-width: 10px;
    padding-top: 1px;
}
#main {
    max-width: 600px;
    width: 100%;
    height: 300px;
    margin: 0px auto;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}
#container {
    position: relative;
    height: 656px;
    width: 100%;
}
.object {
    display: block;
    position: absolute;
}
#scene-one {
    background: #FFF;
    width: 4920px;
    height: 100%;
    display: block;
}
#one {
    background: red;
    height: 458px;
    width: 783px;
    left: 0px;
    bottom: 0px;
    z-index: 9;
}
#two {
    background: blue;
    height: 647px;
    width: 225px;
    left: 520px;
    bottom: -115px;
    z-index: 4;
}
#three {
    background: yellow;
    height: 772px;
    width: 293px;
    left: 365px;
    top: 0px;
    z-index: 3;
}
#four {
    background: green;
    height: 851px;
    width: 608px;
    left: 386px;
    top: -55px;
    z-index: 2;
}
#five {
    background: magenta;
    height: 914px;
    width: 834px;
    left: 130px;
    top: -178px;
}
#six {
    background: purple;
    height: 790px;
    width: 400px;
    left: 290px;
    z-index: 10;
}
#seven {
    background: #333;
    height: 580px;
    width: 861px;
    left: 1480px;
    z-index: 10;
}
#eight {
    background: black;
    height: 563px;
    width: 372px;
    left: 2620px;
    top: 0;
    z-index: 5;
}
#nine {
    width: 500px;
    height: 718px;
    background: #333;
    left: 2545px;
    top: 0;
    z-index: 99;
}
#ten {
    width: 400px;
    height: 300px;
    background: #222;
    left: 5510px;
    top: -25px;
    z-index: 99;
}
#go-up {
    background-color:blue;
    width:650px;
    left:3000px;
    overflow-y: scroll;
    height:100%;
    overflow-x:hidden;
}
#go-up h1 {
    color:white;
}
#go-up p {
    position:absolute;
   ...

JavaScript

$('#main').stellar();

// Figure out where our vertical scroller is
var vertScrollLeftPos = $('#go-up').position().left;

// Set horizontal scroll bar size
$('#scrollfiller').width(vertScrollLeftPos * 2);

// maximum vertical scroll
var maxScrollV = $('#go-up')[0].scrollHeight - $('#go-up').innerHeight();

// Set vertical scroller to bottom
$('#go-up').scrollTop(maxScrollV);

// Maximum horizontal scroll of fake scroller
var maxScrollH = $('#scroller')[0].scrollWidth - $('#scroller').innerWidth();

// Whenever you move the fake scroller, update the content's scroll
$('#scroller').on('scroll', function () {
    // position of fake scroll bar
    var sL = $('#scroller').scrollLeft();
    if (sL < vertScrollLeftPos) {
        // If not at the vertical scroller, just H-scroll
        $('#main').scrollLeft(sL);
    } else {
        // How far have we scolled passed the vertical scroll point?
        var percScrollV = (sL - vertScrollLeftPos) / (maxScrollH - vertScrollLeftPos);

        // Make sure we only scroll to the vertical scroll point
        $('#main').scrollLeft(vertScrollLeftPos);

        // Do the vertical scroll
        $('#go-up').scrollTop(maxScrollV - (maxScrollV * percScrollV));
    }
});