Какие элементы выпадающего списка видит пользователь?

Question

[newaitix]

у меня есть список который представлен в виде 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 - это все элементы
Подскажите как мне понимать какие элементы сейчас должен видеть пользователь ?
В пример приведу выбор города

Answer 1

[Merzley]

Вся суть на самом деле сводится к вычислению координат текущего выделенного элемента списка и сравнению этого значения со значениями прокрутки контейнера.
Накидал что-то похожее и постарался в комментариях объяснить что там происходит. https://jsfiddle.net/05dmtxz6/1/ Надеюсь, поможет.

Comments

[newaitix]

Класно но я сделал так

if(ev.keyCode==38){
	selectP=select;
	(select<1)?0:select--;
	if(select<showEle[0]&&select<showEle[1]&&select!=showEle[0]){showEle[0]--;showEle[1]--;}
	if(select<showEle[1]&&select==showEle[0]){document.getElementById('sity_NP').scrollTop-=26;}
	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&&select>showEle[0]&&select>showEle[1]){showEle[0]++;showEle[1]++;}
	if(select>10&&select>showEle[0]&&select==showEle[1]){document.getElementById('sity_NP').scrollTop+=26;}
	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;
}

[Merzley]

Можно и так. Единственное, хочу обратить внимание, что этот вариант плохо перенесет изменения в верстке. В данном случае это не критично, т.к. код достаточно простой и его можно поправить вслед за версткой, но вообще по возможности нужно избегать таких зависимостей.

document.getElementById('sity_NP').scrollTop+=26;
Попробуйте изменить высоту элементов списка. Или еще хуже - задайте только некоторым из элементов списка высоту, отличную от других. Ведь в этом случае уже надо будет скроллить не на 26px, а на... В общем, думаю, понятно.

if(select>10&&select>showEle[0]&&select>showEle[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)';

В JS лучше добавлять/убирать CSS классы. Если надо будет поменять, скажем, всего лишь цветовую схему шаблона, то кроме CSS ничего трогать не надо будет. А так помимо CSS еще искать по всем скриптам, где же данные цвета применялись.