JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner">
        1 <br />
        2 <br />
        3 <br />
        4 <br />
        5 <br />
        6 <br />
        7 <br />
        8 
    </div>
</div>
<button id="up">Up</button>
    <button id="down">Down</button>

CSS

#outer {
    height:100px;
    overflow: hidden;
    border: 1px #000 solid;
    width: 200px;
}

JavaScript

var total = $("#inner").outerHeight();
var step = 5;


function scrollUpFunction() {
    if(parseInt($("#inner").css('marginTop')) >= -(total)+20) {
         $("#inner").css('marginTop', parseInt($("#inner").css('marginTop'))-step);    
    }
}

function scrollDownFunction() {
    if(parseInt($("#inner").css('marginTop')) <= 0) {    
         $("#inner").css('marginTop', parseInt($("#inner").css('marginTop'))+step);   
    }
}

$("#up").mousedown(function() {
    scrollUpInt = setInterval(scrollUpFunction, 100);
}).mouseup(function() { 
    clearInterval(scrollUpInt);
});
$("#down").mousedown(function() {
    scrollDownInt = setInterval(scrollDownFunction, 100);
}).mouseup(function() {
    clearInterval(scrollDownInt);
});