自定义键盘控制滚动条

HAI6545

于 2021-12-29 17:03:35 发布

阅读量430

点赞数 1

分类专栏： JavaScript案例

本文链接：https://blog.csdn.net/HAI6545/article/details/122220173

版权

自定义键盘滚动条控制键盘事件用户体验滚动操作

关键词由CSDN通过智能技术生成

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div style="width:20px;">
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
    自定义键盘控制滚动条
</div>
</body>
<script>
// 给浏览器绑定键盘事件
document.onkeydown = function(){
    var e = window.event;
    var keycode = e.keyCode
    var word = String.fromCharCode(keycode)
    word = word.toLowerCase()
    var t = document.documentElement.scrollTop || document.body.scrollTop
    if(word === 'a'){
        // 让滚动过的距离减小 - 向上
        t -= 20
    }else if(word === 'b'){
        // 让滚动过的距离增大 - 向下
        t += 20
    }else{
        return false
    }
    document.documentElement.scrollTop = document.body.scrollTop = t
}
</script>
</html>