按空格键向下滚动页面？

Question

我有一个问题，我什至不知道要搜索什么才能解决。当我按空格键时，整个页面向上移动（向下滚动）：我不希望发生这种情况。我的

body

标签的样式为

overflow:hidden

（如果与此有关），因此页面不会有任何滚动条。我通常非常擅长执行初步的故障排除技术，但在这种情况下我什至不知道从哪里开始。我怎样才能阻止这种行为？

附加信息：我正在使用 jQuery 1.4.2

Answer 1

此默认滚动行为来自

keydown

事件。为了防止这种情况，您必须处理

keydown

事件并防止默认行为，方法是从事件处理程序返回

false

或调用

event.preventDefault()

。

根据经验，在防止空格键滚动等默认行为之前请仔细考虑。我一直在使用它，当它在页面中不起作用时我会非常恼火。

但是如果你想吃钥匙...

window.onkeydown = function(e) {
    return e.keyCode !== 32;
};

根据 KeyboardEvent#keyCode

的 MDN 网络文档，

keyCode

是一个已弃用的属性。尽管它在大多数浏览器中仍然有效，但我们鼓励您继续使用 #KeyboardEvent #key (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)，这是一个键的更标准化的字符串表示。空格键的

key

值实际上是输入值：

" "

（单个空格字符串）。因此，如果您想非常小心地支持所有浏览器，您可以编写：

window.onkeydown = function(e) {
    return e.keyCode !== 32 && e.key !== " ";
}

Answer 2

仅仅隐藏溢出是不够的；你实际上必须让它不溢出。即使您可以禁用该行为（吃掉击键，将焦点放在其他容器内），用户仍然可以通过键盘滚动，通过拖动选择页面上的文本，按住鼠标中键等。 .. 这实际上取决于他们的浏览器，只要内容在技术上仍然可见，他们可能会有某种方式将其滚动到视图中。

是时候重新考虑你的布局了。

Answer 3

您所描述的行为非常标准。如果您要创建比页面高的内容，为什么要隐藏其中一些内容？