у меня есть список который представлен в виде div элемента в середине которого ссылки.
Я делаю события для кнопок 38 и 40 то есть вверх и вниз.
список длинный и имеет overflow: auto, то есть прокручивается.
Пользователь набрал в поле поиска слово и нажал кнопку 40 > выбрался элемент номер 0
Пользователь нажал кнопку 40 > выбрался элемент номер 1
Всего пользователь видит 11 элементов списка. Чтоб добраться до остальных нужно прокрутить список вниз или вверх.
Я хочу эмитировать прокрутку списка. Но не могу понять как мне отследить какие элементы сей час должен видеть пользователь.
if(ev.keyCode==38){
selectP=select;
(select<1)?0:select--;
document.querySelectorAll('#sity_NP a')[select].style.background='rgba(55,92,155,0.8)';
document.querySelectorAll('#sity_NP a')[select].style.color='rgb(255,255,255)';
if(selectP>0){
document.querySelectorAll('#sity_NP a')[selectP].style.background='rgb(255,255,255)';
document.querySelectorAll('#sity_NP a')[selectP].style.color='rgb(31,61,106)';
}
document.getElementById('city_form').selectionStart=document.getElementById('city_form').value.length;
ev.preventDefault();
return false;
}
if(ev.keyCode==40){
selectP=select;
(arr.length-1>select)?select++:arr.length-1;
if(select>10)console.log(Number.parseInt(select/10), (select%10)*.1);
document.querySelectorAll('#sity_NP a')[select].style.background='rgba(55,92,155,0.8)';
document.querySelectorAll('#sity_NP a')[select].style.color='rgb(255,255,255)';
if(selectP<arr.length-1&&selectP>-1){
document.querySelectorAll('#sity_NP a')[selectP].style.background='rgb(255,255,255)';
document.querySelectorAll('#sity_NP a')[selectP].style.color='rgb(31,61,106)';
}
document.getElementById('city_form').selectionStart=document.getElementById('city_form').value.length;
ev.preventDefault();
return false;
}
select - выбранный элемент
selectP - предыдущий выбранный элемент
arr - это все элементы
Подскажите как мне понимать какие элементы сейчас должен видеть пользователь ?
В пример приведу
выбор города 