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;

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