Может кто-нибудь помочь, вы можете найти ссылку здесь codepen .
Я создаю виджет панели поиска, где вы можете перемещаться от тега ввода к результатам поиска, и в результатах, которые представляют собой серию Div. Навигация реализована в jquery, где фокус берется или передается div, вызываемому клавишами со стрелками вверх / вниз.
Div находятся в контейнере div.s_dropdwn, который имеет максимальную высоту: 100px и overflow-y: scroll.
Навигация работает, но генерируемая прокрутка ужасна. Если вы начнете с ввода и нажмете клавишу со стрелкой вниз, вы увидите, что я имею в виду. Div, которому дан фокус, исчезает из-за прокрутки.
Я хочу, чтобы, начиная со входа, вы переходили вниз к 5-му div до прокрутки.
$('.move').keydown(function(e){
if (e.keyCode == 40) {
$(".move:focus").attr('tabindex','-1')
$(".move:focus").next().attr('tabindex','0').focus();
}
if (e.keyCode == 38) {
$(".move:focus").attr('tabindex','-1')
$(".move:focus").prev().attr('tabindex','0').focus();
}
});
$('.s_dropdwn > .move.first').keydown(function(e){
if (e.keyCode == 38) {
$(".move.first:focus").attr('tabindex','-1')
$("input").focus()
}
});
$("input").keydown(function(e){
if(e.keyCode === 40){
$('.s_dropdwn > :first-child').attr('tabindex','0').focus();
}
});
*{
margin:0px;
padding:0px;
}
div.s_container{
width:40%;
position:relative;
margin:auto; /* horizontally center the div*/
margin-top:10%; /*margin in percent is based on width of container .parent1*/
background-color:#becee8;
line-height:62px;
}
.con_inpt{
position:relative;
display:inline-block;
vertical-align:middle;
line-height:normal;
border:white solid 1px;
margin-left:5px;
margin-bottom:3px;
width: 200px;
}
.s_dropdwn{
position:absolute;
top:100%;
max-height:150px;
width:100%;
background-color:#becee8;
margin-top:2px;
overflow-y:scroll;
}
.s_dropdwn > div:focus{
outline:none;
background-color:black;
}
.s_dropdwn > div{
display:block;
width:100%;
height:30px;
line-height:30px;
border-top: solid 1px white;
font-size:0.5rem;
font-family: Arial,sans-serif;
font-weight:600;
color:white;
box-sizing: border-box;
padding-left: 10px; /*because of box-sizing padding will be inside the div not outside*/
cursor:pointer;
transition: background-color 0.4s;
}
input#search{
display:inline-block;
border:none;
background:none;
outline:none;
width:80%;
padding:7px 3px;
font-size:0.8rem;
font-weight:600;
color:white;
}
input#search::placeholder{
font-size:0.8rem;
font-weight:600;
color:white
}
<!DOCTYPE html>
<!-- saved from url=(0048)file:///C:/Users/jvalica/Downloads/d3%20(2).html -->
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="parent1" style="position:relative; width:80%;margin:auto; height:300px;border: 1px solid #e4f2f5; background-color: #e4f2f5;">
<div class="s_container">
<div class="con_inpt">
<input id="search" type="text" class="" name="" placeholder="Search" autocomplete="off">
<div class="s_dropdwn">
<div class="move first">
AAA
</div>
<div class="move">
BBB
</div>
<div class="move">
CCC
</div>
<div class="move">
DDD
</div>
<div class="move">
EEE
</div>
<div class="move">
FFF
</div>
<div class="move">
GGG
</div>
<div class="move">
HHH
</div>
</div>
</div>
</div>
</div>
</body>
</html>