简介:通过键盘上下按钮控制列表的滚动选择。
html
<ul class="father">
<liclass="bgc">0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
css
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid #000;
position: relative;
top: 50px;
left: 50px;
}
.bgc {
background-color: #ccc;
}
li {
list-style: none;
line-height: 25px;
}
li:hover {
background-color: #ccc;
}
</style>
js
<script>
let value = 0;
let father = document.querySelector(".father");
let lis = document.querySelectorAll("li");
document.onkeydown = function (e) {
// console.log(e)
if (e.keyCode == 38) {
// 38: 键盘上
e.preventDefault()
if (value > 0) {
value--;
// 当前列的位置 < 滚动出去的距离,说明当前列在可视区域上面,上滚动
if(lis[value].offsetTop < father.scrollTop) {
father.scrollTop = lis[value].offsetTop
} else if(lis[value].offsetTop > father.scrollTop + 75) {
father.scrollTop = lis[value].offsetTop - 75
}
}
} else if (e.keyCode == 40) {
// 40: 键盘下
e.preventDefault()
if (value < lis.length - 1) {
value++;
// 当前列的位置 > 上滚动出去的距离 + 可视区域的大小,表示当前列在可视区域下面,下滚动
if(lis[value].offsetTop > father.scrollTop + 75) {
father.scrollTop = lis[value].offsetTop - 75
} else if(lis[value].offsetTop < father.scrollTop) {
father.scrollTop = lis[value].offsetTop
}
}
}
lis.forEach((item, index) => {
if (index == value) {
lis[index].className = "bgc"
} else {
lis[index].className = ""
}
})
}
</script>