JSFiddle - React, Tailwind, and code Playground

by majidf

HTML

<div id="box">
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <div id="buttons">
        <a id="up" href="#">up</a> - <a id="down" href="#">down</a><hr/>
        myTop = <span id="myTop"></span><br/>
        minTop = <span id="minTop"></span>
    </div>
</div>

CSS

#box { height: 120px; overflow: hidden; border: 5px solid black; background-color: yellow; }
#list { position: relative; top: 0px; }
#list > li {list-style: none outside none; height: 40px; background-color: blue; border-bottom: 2px solid white; }
#buttons { position: absolute; top: 135px; font-size: 20px; }

JavaScript

var minTop = ($("#list").height() - $("#box").height()) * -1 - 5;
$("#minTop").text(minTop);

$("#up").click(function() {
    var $list = $("#list");
    var myTop = parseInt($list.css('top'), 10) - 10;
    $("#myTop").text(myTop);
    if (myTop < minTop) return false;
    $list.css('top', myTop + 'px');
});
$("#down").click(function() {
    var $list = $("#list");
    var myTop = parseInt($list.css('top'), 10) + 10;
    $("#myTop").text(myTop);
    if (myTop > 0) return false;
    $list.css('top', myTop + 'px');
});