JSFiddle - React, Tailwind, and code Playground

HTML

<title>Title of the document</title>
<script src="jquery-3.2.1.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    
<link rel="stylesheet" href="style.css">

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">



<body class="wrapper">
  <div class="container">
    <div class="inner" data-index="1" id="prvi">
    </div>
    <div class="inner" data-index="2" id="drugi">
    </div>
    <div class="inner" data-index="3" id="treci">
    </div>
    <div class="inner" data-index="4" id="peti">
    </div>
  </div>
</body>

CSS

html, body {
    height:100%;
    padding:0;
    margin:0;
    font-family: 'Roboto', sans-serif;
    -ms-overflow-style: none;
}

.container {
    height:400%;
    width:100%;
    padding:0;
    z-index: -1;
}
.inner {
    height:750px;
    width:100%;
    background-color: white;
}



#prvi{
    background-color:yellow;
    overflow: hidden;
} 

#peti{  
    position: relative;
    background-color: #e6e6e6
}

::-webkit-scrollbar { 
    width: 0;
}


::-webkit-scrollbar { 
    display: none; 
}

#drugi{
    background:url("about11.jpg") center center / cover fixed;
    overflow: hidden;
}
#treci{
    background: white;
    border-bottom: 1px solid #DAA25A;
}

JavaScript

// set to true to see the console.log debug info
var debug = false;

// setup default index of 0
var index = 0;

// setup scrolling flag
var scrolling = false;

// cache a few elements for reference
var win = $( window );
var body = $( 'body' );
var container = $( '.container' );

// setup a few more variables for future use
var lastTop = 0;
var current, offset;

// bind scroll event
$(function(){
win.on( 'scroll', function( ev ) {
    // prevent the default event
    ev.preventDefault();
    // check to make sure we don't fire the scroll multiple times
    if ( debug ) console.log( scrolling, 'scrolling' );
    if ( scrolling ) return;
    
    // set the scrolling flag to true
    scrolling = true;
    
    // run the update function
    updateActive();
    
    // clear the scrolling flag to allow the user to access the next element
    setTimeout( function() { scrolling = false; }, 500 );
    
    // update a few variables for the next interaction
    current = container.find( '.inner[data-index='+index+']' );
    offset = current.offset();
    lastTop = offset.top;
    
    // handle the animation
    $('body,html').animate(
        { scrollTop : offset.top + 'px' }
    );
    
});
});
function updateActive() {
    // get the current top offset
    var top = win.scrollTop();
    // determine which direction we are scrolling
    if ( top > lastTop ) { 
        // down
        if ( debug ) console.log( 'scrolling down' );
        // let make sure we aren't on the last element
        if ( debug ) console.log( index, $( '.inner' ).length );
        if ( index == $( '.inner' ).length  ) {
            if ( debug ) console.log( 'on last element, nothing to do' );
            return;
        }
        
        // update index & top
        if ( debug ) console.log( index, 'index before' );
        index++;
        if ( debug ) console.log( index, 'index after' );
        lastTop = top;
        
    } else { 
        // up
        if ( debug ) console.log(...