自定义键盘按键控制滚动条

键盘中的空格键和上下键，默认情况下就可以控制滚动条。
如果我们规定某个键来控制滚动条向上滚动，类似于方向键"上"对滚动条的控制；某个键来了控制滚动条向下滚动，类似于方向键"下"对滚动条的控制；就需要自定义键盘事件来实现。
使用自己定义的键来控制滚动条，不希望默认的空格键和上下键控制滚动条，就需要将默认能控制滚动条的按键的默认行为阻止掉。
下面，我们让按键"a"控制向上滚动，类似于方向键"上"键的功能；按键"b"控制向下滚动，类似于方向键"下"的功能。
效果图如下：

自定义键盘按键控制滚动条

html结构代码如下：

<style>
.box{
    width: 20px;
}
</style>
<div class="box">
    键盘中的空格键和上下键，默认情况下就可以控制滚动条。
    如果我们规定某个键来控制滚动条向上滚动，类似于方向键"上"对滚动条的控制；某个键来了控制滚动条向下滚动，类似于方向键"下"对滚动条的控制；就需要自定义键盘事件来实现。
    如果用自己定义的键来控制滚动条，不希望默认的空格键和上下键控制滚动条，就需要将默认能控制滚动条的按键的默认行为阻止掉。
    下面，我们让按键"a"控制向上滚动，类似于方向键"上"键的功能；按键"b"控制向下滚动，类似于方向键"下"的功能。
</div>

js逻辑代码：

// 键盘事件
document.addEventListener('keydown',keydown)
// 按下键盘后，判断是否是自定义的键，不是的话就阻止默认行为，是的话就控制滚动条
function keydown(){
    // 获取事件对象 - 键盘码的获取需要依赖事件对象
    var e = window.event;
    // 获取按键码
    var keycode = e.keyCode || e.which;
    // 通过按键码获取到对应的字符 - 因为按键码不好区分大小写字母
    var word = String.fromCharCode(keycode).toLowerCase()
    console.log(keycode,word)
    // 判断获取到的字符是否是a和b，然后控制滚动条
    // 获取浏览器卷去的距离
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    if(word === 'a'){
        t -= 20 // 让卷去的距离减小
    }else if(word === 'b'){
        t += 20 // 让卷去的距离增大
    }else{
        // 其他键就阻止默认行为
        e.returnValue = false
    }
    // 将减小或增大的数字设置给卷去的距离
    document.documentElement.scrollTop = document.body.scrollTop = t
}