0
ユーザーが上下矢印キーを押したときに自動スクロールを実装しようとすると、次のアイテムまたは前のアイテムをそれぞれ選択する必要があります。また、選択したアイテムが可視領域にない場合は、可視領域にスクロールする必要があります。奇妙な動作のスクロール
私はそれをやろうとしましたが、スクロールが期待通りに機能しません。
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：
あなたがここにコードを見たい場合はここでは私の
JSフィドル
へのリンクです
* {
-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);
};