特定键盘键上的 Javascript 滚动页面答案

【问题标题】：Javascript Scroll page on specific Keyboard Key特定键盘键上的 Javascript 滚动页面
【发布时间】：2022-02-04 23:54:15
【问题描述】：

当我按住/按下键盘上的“w”键时，整个页面应该向上滚动。当我按下“d”键时，它会向下滚动。除非我在输入字段中，否则我想输入 W/D 字母时会向上/向下滚动。

这将是按下 W 时向下滚动的代码。键盘上的 87 = W（代码无法正常工作）

document.body.onkeyup = function(e) {
    var code = e.keyCode;
    if(code === 87) {
        window.scrollTo(document.body.scrollLeft,
                        document.body.scrollBottom + 500);
    }
};

我该怎么做？有没有办法平滑滚动，所以我不点击按键，我可以按住它们？

【问题讨论】：

标签： javascript html jquery css web

【解决方案1】：

code 工作正常，只有在输入没有聚焦时才能滚动，您可以检查inputElement !== document.activeElement。要顺利向上滚动，您应该这样做。

document.body.onkeyup = function(e) {
    const inputElement = document.getElementById('myinput');
    var code = e.keyCode;
    console.log(code);
    if(code === 87 && (inputElement !== document.activeElement)) {
        window.scrollTo(0, 0);
        console.log('scrolling');
    }
};

html {
  scroll-behavior: smooth;
}

&lt;input id='myinput' &gt;&lt;/input&gt;

将滚动行为：平滑添加到<html> 元素以启用平滑滚动整个页面（注意：也可以将其添加到特定元素/滚动容器）：

【讨论】：

【解决方案2】：

我已经修复了代码，当你按下 W/D 时它会沿 Y 轴滚动

var scrollY = 0;
window.addEventListener("keydown", function(e){
    var code = e.keyCode;
    if(code === 87) { // W
       scrollY += 20;
       window.scrollTo(0, scrollY);
    }
    if(code === 68) { // D
       scrollY -= 20;
       window.scrollTo(0,scrollY);
    }
});

.container{
    background-color:red;
    height:1000px
}

.container2{
    background-color:blue;
    height:100vh
}

<div class='container'>
    test
<div>

<div class='container2'>
    test
<div>

【讨论】：

问题是它只能工作一次，你可以用键滚动一次
你的问题当时还不清楚。现在我已经修好了。现在检查它是否按您的需要工作。 @vize