JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

html {
    height: 100%;
    padding: 0;
}
body {
    border: 1px solid blue;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 3000px;
}

div {
    background: orange;
    border: 10px solid red;
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    width: 300px;
}

JavaScript

//Scroll postion
$(window).scroll(function() {
    var documentScrollLeft = $(document).scrollLeft(),
        lastScrollLeft = lastScrollLeft || 0;
    
    if (lastScrollLeft != documentScrollLeft) {
        lastScrollLeft = documentScrollLeft; 
        //
        for(var j = 0; j <= numTotalPages; j++){
            if(lastScrollLeft <= arrayPercent[j]){
                console.log(arrayPercent[j]);
                numCurrentPage = j+1;
                break;
            }
        }
    }
    //
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        // do something
        var TEMPcurrent = 'page'+numCurrentPage;
        $('html, body').animate({
            scrollLeft: $('#'+TEMPcurrent).offset().left
        }, 250);
    }, 500));
});