JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Horizontal Scrolling using -webkit-overflow-scrolling: touch</h3>
<div class="wrap">
    <div class="box-wrap">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>
<h4>0</h4>

CSS

body {
    background: #ddd; 
    }
div.wrap {
    width: 400px;
    height: 200px;
    margin: 20px auto;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    }
div.box-wrap {
    width: 1050px;
    height: 200px;
    background: #fff;
    }
div.box {
    background: #222;
    height: 200px;
    width: 200px;
    float: left;
    margin-right: 10px;
}
h3, h4 { text-align: center; }

JavaScript

$('div.wrap').scroll(function(e){
    $('h4').html( $(this).scrollLeft() );
});