使用箭头键滚动时，在ul元素中间设置菜单顶部

问题描述：

当您单击输入字段并在单击向上或向下箭头键时激活所选项目上的蓝色背景时，将会打开一个下拉菜单。它还会将选定的项目保留在顶部以防止选择消失。使用箭头键滚动时，在ul元素中间设置菜单顶部

我想要做的是在用户单击向下箭头键一次后，将“顶部”固定到菜单中间，以便在用户向上或向下滚动时选择位于中间。

我试图通过将scrollTop（）方法分成两半来玩玩，但我似乎无法完成这项工作。

$(document).ready(function() { 
 

 
var $menu = $('#menu'); 
 
var $input = $('#maininput'); 
 

 
$menu.hide(); 
 

 
$input.focus(function() { 
 
    $menu.show();   
 
}); 
 

 
$input.blur(function() { 
 
    $menu.hide();   
 
}); 
 

 
$input.on('keyup', function (e) { 
 
if (e.keyCode === 40) { // down 
 
    e.preventDefault(); 
 
    var selected = $(".selected"); 
 
    var $list = $("li.list"); 
 
    var index = $list.index(selected); 
 
    $list.removeClass("selected"); 
 
    $list.eq(index + 1).addClass("selected"); 
 
    $(".main ul").scrollTop($('li').index($(".selected")) * $('.main li').height()); 
 
} 
 

 
if (e.keyCode === 38) { // up 
 
    e.preventDefault(); 
 
    var selected = $(".selected"); 
 
    var $list = $("li.list"); 
 
    var index = $list.index(selected); 
 
    $list.removeClass("selected"); 
 
    $list.eq(index - 1).addClass("selected"); 
 
    $(".main ul").scrollTop($('li').index($(".selected")) * $('.main li').height());  
 
} 
 
}) 
 
});

li { 
 
    list-style: none; 
 
} 
 

 
ul { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-color: #eee; 
 
    width: 130px; 
 
    height: 120px; 
 
    overflow: auto; 
 
    overflow-x:hidden; 
 
    border-spacing: 10px; 
 
} 
 

 
.list { 
 
/* padding-top: 5px; 
 
    padding-bottom: 5px; */ 
 
    padding-left: 10px; 
 
    height: 40px; 
 
    line-height: 2.1em; 
 
} 
 

 
#maininput { 
 
    padding: 10px; 
 
} 
 

 
.selected { 
 
    background-color: #d2d2d2; 
 
    border-radius: 4px; 
 
    width: 220px; 
 
    background-color: #0096d6; 
 
    border-radius: 4px; 
 
    width: 100%; 
 
    color: #ffffff; 
 
}

<html> 
 
<body> 
 
<input id="maininput" /> 
 
<div class="main"> 
 
    <ul id="menu"> 
 
    <li class="list">one</li> 
 
    <li class="list">two</li> 
 
    <li class="list">three</li> 
 
    <li class="list">four</li> 
 
    <li class="list">five</li> 
 
    <li class="list">six</li> 
 
    <li class="list">seven</li> 
 
    <li class="list">eight</li> 
 
    <li class="list">nine</li> 
 
    <li class="list">ten</li> 
 
    </ul> 
 
</div> 
 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
</body> 
 
</html>

帮助理解。谢谢。

答

编辑此行，在javascript（用于向上和向下）：

$(".main ul").scrollTop($('li').index($(".selected")) * $('.main li').height());

这一行：

$(".main ul").scrollTop(($('li').index($(".selected"))-1) * $('.main li').height());

使用箭头键滚动时，在ul元素中间设置菜单顶部

相关推荐