JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ul_wrapper">
  <ul id="ul_par">
   
  </ul>
</div>

CSS

#ul_wrapper { height:50px; overflow:auto; border:1px solid #d3d3d3; }

JavaScript

$(document).ready(function(e) {
var index = 0;

	for(var i=0; i<100; i++){
		$("<li />", {
    	"id": "item" + i, 
      "text": "test " + i
    })
    	.appendTo("#ul_par");
  }

$(document).bind("keydown", function(e){
		var code = e.keyCode || e.which;
    
   if(code == 40) {
   		index = index + 1;
   } else {
	   index = index - 1;
   }
   
    $("#ul_par li").css("background","#fff");
		$("#ul_wrapper").animate({ scrollTop: $("#item"+index).offset().top + "px" }, 1000);
    $("#item"+index).css("background","#ff0000");
    
  })
});