如何浏览溢出：滚动

1）当我使用键盘按键（38,40）在li中导航时，由于溢出，它不会滚动到突出显示的li：滚动。2）是否可以在输入键（13）的输入中添加突出显示的文本？

var pr = ["Product1", "Product2", "Product3", "Product4", "Product5", "Product6","Product1", "Product2", "Product3", "Product4", "Product5", "Product6","Product1", "Product2", "Product3", "Product4", "Product5", "Product6","Product1", "Product2", "Product3", "Product4", "Product5", "Product6","Product1", "Product2", "Product3", "Product4", "Product5", "Product6"];
for (var option in pr) {
  var newLi = document.createElement("li");
  newLi.innerHTML = pr[option];
  $("#here").append(newLi);
}

var currentFocus;

$(document).on("keyup", function(e) {
  if (e.keyCode === 38 || e.keyCode === 40) {
    e.preventDefault();
    
    var children = $("#here").children();
    if (currentFocus === undefined) {
      currentFocus = 0;
    } else {
      currentFocus += e.keyCode === 38 ? -1 : 1;
      currentFocus < 0 && (currentFocus = children.length - 1);
      currentFocus >= children.length && (currentFocus = 0);
    }
    children.removeClass("--focus");
    children.eq(currentFocus).addClass("--focus"); 
  }

});

#here {
  background-color: white;
  width: 175px;
  height: 300px;
  border: 1px solid grey;
  padding: 0px 0px 10px 10px;
  overflow: scroll;
}
#here li:hover,
#here li.--focus {
  background: #ccc;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input>
<ul id="here">
</ul>