Scrolling inner div on key down and up

Question

I have build an autocomplete container which displays the first four results and the rest are hidden and can be seen when scrolling the inner div element which holds all the res

Answer 1

Recently I faced the same problem and solved it by using .emphasized textscrollIntoView(), sample code is below. Example of two function respectively for up arrow key and down arrow key

moveUp: function(e) {
        if (current > 0) {
            current--;
            var allNOdes = document.getElementById('list').childNodes;
            e.stopPropagation();
            if (allNOdes[current]) {
                allNOdes[current].scrollIntoView(true);
            }
        }
    },
    moveDown: function(e) {
        if (current <  10) {
            current++;
            var allNOdes = document.getElementById('list').childNodes;
            e.stopPropagation();
            if (allNOdes[current]) {
                allNOdes[current].scrollIntoView(true);
            }
        }
    }

Initially define current as 0 HTML:

 

   
1
   
2
   
3
   
4
 

CSS:

.wrapper{
    position: relative;
    height: 150px;
    width: 100px;
    overflow: hidden;
}

.result{
    position: absolute;
}