我正在创建一个选择框,并在keydown之后放置键事件,滚动条不会关闭,但键事件和值的选择运行良好
小提琴只是在解决它如何控制卷轴 http://jsfiddle.net/nsoni/d8FNp/1/
HTML:
<div class="scrol">
<div class="ful ful_1">1</div>
<div class="ful ful_2">2</div>
<div class="ful ful_3">3</div>
<div class="ful ful_4">4</div>
<div class="ful ful_5">5</div>
<div class="ful ful_6">6</div>
<div class="ful ful_7">7</div>
<div class="ful ful_8">8</div>
<div class="ful ful_9">9</div>
<div class="ful ful_10">10</div>
</div>
jquery的:
var i=1;
$(window).bind('keydown', function(e){
if (e.keyCode==13) {
alert($('.change').text());
} else if (e.keyCode==40) {
if(i>=11)i=1;
$('.ful').removeClass("change");
$('.ful_'+i).addClass("change"); i++;
}
else if (e.keyCode==38) {
if(i<=0)i=10;
$('.ful').removeClass("change");
$('.ful_'+i).addClass("change"); i--;
}
});
的CSS:
.scrol{
width:50%;
height:160px;
overflow-y: scroll;
overflow-x:hidden;
}
.ful{
background:grey;
margin-bottom:2px;
border:1px solid;
}
.change{
background:#fff;
}
.change1{
background:#cdcdcd;
}
答案 0 :(得分:1)
也许这会朝你想要的方向发展?
var i = 1;
$(document).on('keydown', function (e) {
if (e.keyCode == 13) {
} else if (e.keyCode == 40) {
i++;
if (i >= 11) i = 1;
$('.ful').removeClass("change");
$('.ful_' + i).addClass("change");
$('.scrol').animate({scrollTop:$('.ful_' + i).offset().top},200);
} else if (e.keyCode == 38) {
i--;
if (i <= 0) i = 10;
$('.ful').removeClass("change");
$('.ful_' + i).addClass("change");
$('.scrol').animate({scrollTop:$('.ful_' + i).offset().top}, 200);
}
e.preventDefault();
});