JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <section class="fill"></section>
    <section class="init"></section>
    <section class="fill"></section>
</div>

CSS

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html, body {
    width:100%;
    height:100%;
    position:relative;
}
.wrapper {
    width:100%;
	height:100%;
	position:relative;
	white-space: nowrap;
    overflow-x:scroll;
}
section {
    width: 100%;
    max-width: 640px;
    height: 100%;
    background-color: #313138;
    padding: 10px;
    margin-right: 20px;
    display: inline-block;
	vertical-align: top;
}
section.fill {
    width: 100%;
	max-width:100%;
    margin-right: 0;
    background-color: transparent;
	padding:0;
}

JavaScript

var winW = $(window).width();
var sectionW = $('.init').width();
var startPos = (winW/2)+(sectionW/2)+15;
console.log(winW, sectionW, startPos);
$('.wrapper').scrollLeft(startPos);

$(window).scroll(function(){
    console.log($('body').scrollLeft());
});