JSFiddle - React, Tailwind, and code Playground

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

by Martin Emanuelsson

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div class="scroller"> 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

.scroller {
    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

jQuery(function () {
    var iv; //timer for interval
    var div = $('.scroller');
    $('#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);
    });
});