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() );
});


var start_x, move, wrap_x;
$('div.wrap').live("mousedown", function(e) {
    e.preventDefault(); // optional. May be it works fine without this
    start_x = e.originalEvent.pageX;
    move = 1;
    wrap_x = $(this).scrollLeft();
})
$('div.wrap').live("mousemove", function(e) {
    if (move) {
        e.preventDefault(); // optional. May be it works fine without this
        var x = e.originalEvent.pageX;
        var result = wrap_x+start_x-x;
        $(this).scrollLeft(result);
  }
})
$('div.wrap').live("mouseup", function(e) {
    move = 0;
})