JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dropdown-menu">
        <li tabindex="-1">1</li>
        <li tabindex="-1" class="active">2</li>
        <li tabindex="-1">3</li>
        <li tabindex="-1">4</li>
        <li tabindex="-1">5</li>
        <li tabindex="-1">6</li>
        <li tabindex="-1">7</li>
        <li tabindex="-1">8</li>
        <li tabindex="-1">9</li>
        <li tabindex="-1">10</li>
        <li tabindex="-1">11</li>
        <li tabindex="-1">12</li>
        <li tabindex="-1">13</li>
        <li tabindex="-1">14</li>
        <li tabindex="-1">15</li>
        <li tabindex="-1">16</li>
        <li tabindex="-1">17</li>
        <li tabindex="-1">18</li>
        <li tabindex="-1">19</li>
    </ul>

CSS

ul { overflow: auto; height: 100px; padding: 5px; border: 1px solid blue; }
.active { background-color: red; margin: 2px; }

JavaScript

$(function () {
    $('li').keydown (function (e) {
        console.log('keydown');
        e.preventDefault();
        var selected = $('ul li.active').removeClass('active');
        if (e.which == 38) { //up
            if (!selected.length || !selected.prev().length ) {
                $('ul li').last().addClass('active').focus();
            } else {
                selected.prev().addClass('active').focus();
            }
        } else if (e.which == 40) { //down
            if (!selected.length || !selected.next().length ) {
                $('ul li').first().addClass('active').focus();
            } else {
                selected.next().addClass('active').focus();
            }
        }
    }).mousemove(function (e) {
        console.log('mouse move, mouse coordinates: ' + e.pageX + ' ' + e.pageY);
    }).mouseenter(function (e) {
        console.log('mouse enter, mouse coordinates: ' + e.pageX + ' ' + e.pageY);
    })
    
    
   $('ul').scroll(function () {
        console.log('scroll ');
    });
});