JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<div id="wrapper">asksdlcvmlkewrlk3kjdnksdjcnvslkjvnzdkjvndklndflkgjneklfgjenrfkljngkljxvnsdlkjfnsdlkfjnsdlkfjnwelfkjvlijdviua4nrliejnflizfdjnvzldcjvnzksdjnflkawejfnalkwdjfnlkszdjvnlkxcjn vzklsj faklerjfg zlfdjvnd;ijvnawlekjf lkzdjvnzlsdijvlawejnf</div>

<button id="right-button">Click me</button>

CSS

#wrapper {
    height: 50px;
    width: 200px;
    overflow-y: hidden;
    overflow-x: auto;
    
}

JavaScript

var $wrapper = $('#wrapper');

function startScrolling()
{
    // contintually increase scroll position
    $wrapper.animate({scrollLeft: '+=20'}, startScrolling);
}

function stopScrolling()
{
    // stop increasing scroll position
    $wrapper.stop();
}

$('#right-button').mousedown(startScrolling).mouseup(stopScrolling);