I am currently working on an autocomplete feature using AngularJS. I seem to be experiencing a problem with the scrollbar behavior. In the interactive gif provided, you can observe that the scrollbar remains stationary when navigating with the arrow keys. How can I ensure that the scrollbar moves along with the highlighted option as I navigate with the arrow keys?
Below is my CSS code:
input {
width: 300px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
width: 306px;
}
li {
border: 1px solid grey;
}
.countries {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
.countryIndex {
background-color: #B2D7FE;
}
You can test the functionality in this CodePen demo