键盘上下选择列表项

简介：通过键盘上下按钮控制列表的滚动选择。

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>