JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/18030571/use-js-jquery-to-scroll-a-divs-content-that-has-overflow-scroll-applied

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="content"> begin text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text end
</div>

<div style="text-align:center">
    <a id="left">scroll left</a>
    <a id="right">scroll right</a>
</div>

CSS

#content {
    overflow-x: hidden;
    white-space:nowrap;
    border:1px solid red;
}
#left, #right {
    cursor:pointer;
    margin:2em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
}

JavaScript

$(function () {
    var iv; //timer for interval
    var div = $('#content');
    $('#left').mousedown(function () {
        iv = setInterval(function () {
            div.scrollLeft(div.scrollLeft() - 4);
            //console.log('downLeft');
        }, 20);
    });
    $('#right').mousedown(function () {
        iv = setInterval(function () {
            div.scrollLeft(div.scrollLeft() + 4);
            //console.log('downRight');
        }, 20);
    });
    $('#left,#right').on('mouseup mouseleave', function () {
        clearInterval(iv);
        //console.log('up or leave');
    });
});