JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<div id="wrapper"></div>
    <div id="navigator">
        <div id="iconup" class="icon">ICON UP</div>
        <div id="icondown" class="icon">ICON DOWN</div>
        <div id="up" class="btn">UP</div>
        <div id="down" class="btn">DOWN</div>
        <div id="left" class="btn">LEFT</div>
        <div id="right" class="btn">RIGHT</div>
        <div id="pager" class="pager"></div>
    </div>
    <div id="pageset"></div>

CSS

*{
            margin: 0;
            padding: 0;
        }
        #pageset {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 500px;
            height: 200px;
            border: 1px solid rgba(0,255,255,1);
            -webkit-box-sizing:border-box;
        }
        #wrapper {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 500px;
            background-color: green;
            /*overflow: scroll;*/ /* PROBLEM HERE----------------*/
            /*height: 200px;*/ /* PROBLEM HERE----------------*/
        }
        #navigator {
            position: absolute;
            left: 600px;
        }
        ul {
            list-style: none;
            /* margin:0px;
            padding:0px;*/
        }
        li:nth-child(even) {
            background: #d80000;
        }
        li {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin: 0px;
        }
        .focus {
            background-color: yellow !important;
        }
        .btn {
            float: left;
            width: 50px;
            height: 50px;
            border: 2px gray solid;
            margin: 10px;
            background-color: #f0f0f0 ;
        }
        .icon {
            width: 60px;
            height: 60px;
            border: 2px gray solid;
            margin: 10px;
            background-color: #99ff66;        
        }

JavaScript

//var range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39];
        var range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45];
        var list = document.getElementsByTagName('li');
        var curPos = 0; // cell position in the list rendered
        var curRow = 1; // row cell position in the list rendered
        var itemsForRow = 5;
        var rows = 2;
        var curPage = 1;
        var pageTot = Math.ceil(range.length / (itemsForRow * 2));
        var animPos;
        var animMov = 200;
        var animSpeed = 400; // 400 default

        function start() {
            // register event handlers
            var elm = document.getElementById('up');
            elm.addEventListener('click', goUp);
            elm = document.getElementById('down');
            elm.addEventListener('click', goDown);
            elm = document.getElementById('left');
            elm.addEventListener('click', goLeft);
            elm = document.getElementById('right');
            elm.addEventListener('click', goRight);

            render();
            pager();
            var pos = $('#wrapper').offset();
            animPos = pos.top;
        }

        function pager() {
            // visuale page info
            var elm = document.getElementById('pager');
            elm.innerHTML = 'Page: ' + curPage + ' of page: ' + pageTot;

            // disable btns
            var btnUp = document.getElementById('iconup');
            var btnDown = document.getElementById('icondown');
            if (curPage === 1) {
                //btnUp.style.display = 'none';
                btnUp.style.visibility = 'hidden';
            } else {
                //btnUp.style.display = '';
                btnUp.style.visibility = '';
            }
           ...