JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://brandonaaron.github.io/jquery-mousewheel/jquery.mousewheel.js"></script>
<div id="container">
    <div id="main">
        <div id="scene-three" class="frame" data-stellar-offset-parent="true">          
            <div id="go-up" class="object">
                    <div id="go-up-inner">
                        <div id="background_three_up" class="object"></div>
                         <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 with edge scrolling, but with mouse to the top of the viewport</h2>

                         <h1>5 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>

      ...

CSS

#main {
    max-width: 600px;
    width: 100%;
    height: 300px;
    margin: 0px auto;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
#container {
    position: relative;
    height: 656px;
    width: 100%;
}
.object {
    display: block;
    position: absolute;
}
#scene-three {
    background: #2b2f39;
    width: 5438px;
    height: 300px;
    background-position-y: -40px;
}

#go-up {
    background-color:#080810;
    width:600px;
    left: 2262px;
    overflow-y: scroll;
    height:100%;
    position:absolute;
    overflow-x:hidden;
    margin-left:-824px;
}

#go-up-inner {
    height:4000px;
}

#background_three_up {
    background-color: #080810 ;
    height: 4677px;
    width: 600px;
    left: 0;
    top: 790px;
    z-index: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#go-up h1 {
    color:white;
}
#go-up p {
    position:absolute;
    bottom:0px;
}

JavaScript

$('#main').bind('mousewheel', function(event, delta) {
    val = this.scrollLeft - (delta * 400);
    jQuery(this).stop().animate({
        scrollLeft: val
    }, 600);
    event.preventDefault();
});

$("#go-up").scrollTop($("#go-up")[0].scrollHeight);

$('#main').scroll(function(e)
        {
            if($(this).scrollLeft()>1430)
            {

            }
});