0
我想實現自動滾動時，用戶按向上或向下箭頭鍵應分別選擇下一個或上一個項目。另外，如果選擇的項目不在可見區域，則應該滾動到可見區域。滾動行爲在ul裏奇怪
所以，我試圖這樣做，但滾動不按預期工作。
這裏是鏈接到我的
JS小提琴
如果你想在這裏看到的代碼：
HTML：
<div class="combobox">
<input type="text" class="txtbox"/>
<button class="txtbox-btn">GO</button>
</div>
<ul class="combobox-options">
<li><span>AAA</span></li>
<li><span>BBB</span></li>
<li><span>CCC</span></li>
<li><span>DDD</span></li>
<li><span>AAA1</span></li>
<li><span>AAA2</span></li>
<li><span>AAA3</span></li>
<li><span>BBB1</span></li>
<li><span>BBB2</span></li>
<li><span>BBB3</span></li>
<li><span>CCC1</span></li>
<li><span>CCC2</span></li>
<li><span>CCC3</span></li>
</ul>
CSS：
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul{
list-style-type: none;
padding: 0px;
margin: 0px;
}
/*html, input, textarea, a{
font-family: 'Montserrat';
}*/
input[type="text"].txtbox {
color: #000000;
height: 60px;
width: 260px;
font-size: 22px;
/*border: none;*/
padding-left: 21px;
}
.txtbox-btn {
width: 60px;
height: 60px;
background: #1f7f5c;
border: none;
text-align: center;
text-decoration: none;
line-height: 60px;
color: #fff;
}
.combobox {
position: relative;
width: 320px;
height: 60px;
}
.combobox input[type="text"].txtbox,
.combobox .txtbox-btn{
position: absolute;
}
.combobox .txtbox-btn{
right: 0;
}
.combobox + .combobox-options{
width: 320px;
position: absolute;
background: #1f7f5c;
color: #fff;
}
.combobox + .combobox-options li {
height: 50px;
padding: : 12px;
border-bottom: 1px solid #2a8664;
display: table;
width: 100%;
}
.combobox + .combobox-options li span {
padding-left: 21px;
font-size: 22px;
display: table-cell;
vertical-align: middle;
}
.selected {
background: #0055ee;
}
.combobox-options{
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
JQuery的：
$('input').on('keydown', function(e){
var $results = $('.combobox-options li span');
if(e.keyCode == 40) { //down arrow
if($($results).hasClass('selected')){
var selectedComboItem = $($results).filter('.selected');
if(selectedComboItem.parents('li').next().length == 1){
$('.selected').removeClass('selected');
selectedComboItem.parents('li').next().children('span').addClass('selected');
scrollMe(selectedComboItem, $('.combobox-options'));
} else {
$('.selected').removeClass('selected');
}
}
else {
$results.first().addClass('selected');
scrollMe(selectedComboItem, $('.combobox-options'));
}
e.preventDefault();
}
if(e.keyCode == 38) { //up arrow
if($results.hasClass('selected')){
var selectedComboItem = $($results).filter('.selected');
if(selectedComboItem.parents('li').prev().length == 1){
$('.selected').removeClass('selected');
selectedComboItem.parents('li').prev().children('span').addClass('selected');
scrollMe(selectedComboItem, $('.combobox-options'));
} else {
$('.selected').removeClass('selected');
}
}
else {
$results.last().addClass('selected');
scrollMe(selectedComboItem, $('.combobox-options'));
}
e.preventDefault();
}
});
function scrollMe(element, container){
var offset = $(container).find('li').first().position().top;
$(container).scrollTop($(element).position().top - offset);
};