JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<a id="scrollLeft" href="#">Left</a>
<a id="scrollRight" href="#">Right</a>

<div id="wrapper">
    <div id="content">
        
        <p>iusdhfiuahsdifuhasofuhaiosuhdfioasuhdfoiuhasdifouhasoiduhfaoisuhd        iusdhfiuahsdifuhasofuhaiosuhdfioasuhdfoiuhasdifouhasoiduhfaoisuhd        iusdhfiuahsdifuhasofuhaiosuhdfioasuhdfoiuhasdifouhasoiduhfaoisuhd        
        </p>
    </div>
</div>

CSS

#content {
    overflow:auto;
    width:330px; /*could be whatever*/
}

JavaScript

var step = 25;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$("#scrollLeft").bind("click", function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $("#content").animate({
        scrollLeft: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("left");
}).bind("mouseout", function(event) {
    scrolling = false;
});


$("#scrollRight").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollRight: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});

function scrollContent(direction) {
    var amount = (direction === "up" ? "-=1px" : "+=1px");
    $("#content").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}