HTML防止空格键滚动页面答案

【问题标题】：HTML prevent space bar from scrolling pageHTML防止空格键滚动页面
【发布时间】：2014-04-28 21:12:21
【问题描述】：

我正在使用代码：

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

这正是我想要的，当按下空格键时停止页面滚动。但是，它也可以防止用户在文本框中输入空格

有没有办法在键入时防止空格键滚动以及保留空格键功能？

【问题讨论】：

注意：大多数浏览器触发默认滚动行为在“keydown”，而不是“keyup”。
@iono 切换我的 addEventListener 来监听 keydown 而不是 keyup 是诀窍！谢谢！我添加了 e.preventDefault 但页面仍然滚动，因为它在 keydown 上滚动，而我阻止它在 keyup 上滚动。

标签： javascript html

【解决方案1】：

尝试检查target 是否为正文：

window.addEventListener('keydown', function(e) {
  if(e.keyCode == 32 && e.target == document.body) {
    e.preventDefault();
  }
});

body { height: 100000px; }

<input />
<textarea></textarea>

Demo

【讨论】：

+1 提到 return false 是非标准的。从来不知道为什么有两种方法
你是法师，这正是我所需要的。向你致敬！

【解决方案2】：

您可以查看e.target，如果它是您返回false 的正文。

window.onkeydown = function(e) { 
  return !(e.keyCode == 32 && e.target == document.body);
};

【讨论】：

我想你的意思是“如果是你返回的身体false”:)
您需要在事件上设置 preventDefault 以停止滚动。
更新（2021 年）：根据developer.mozilla.org，不推荐使用 e.keyCode。现在你可以这样做：window.onkeydown = function(e) {return !(e.key == ' ' && e.target == document.body);};。使用 Firefox 90 和 Chromium 92 测试。

【解决方案3】：

您可以检查事件的目标，并且仅在它不是“可键入”元素时才运行您的代码。例如：

window.onkeydown = function(e) {
    var elem = e.target.nodename;
    if( elem !== 'TEXTAREA' && elem != 'INPUT' ) {
        return !(e.keyCode == 32);
    }
};

【讨论】：

【解决方案4】：

window.onkeydown = function(e) { 
    e = e || window.event;  //normalize the evebnt for IE
    var target = e.srcElement || e.target;  //Get the element that event was triggered on
    var tagName = target.tagName;  //get the tag name of the element [could also just compare elements]
    return !(tagName==="BODY" && e.keyCode == 32);  //see if it was body and space
};

【讨论】：

【解决方案5】：

CSS：

body::-webkit-scrollbar {display: none;} /* Chrome, Safari and Opera */
body {-ms-overflow-style: none;}  /* IE and Edge */
html {scrollbar-width: none;}  /* Firefox */

JavaScript：

window.addEventListener('keydown', function() {if (event.keyCode == 32) {document.body.style.overflow = "hidden";}});
window.addEventListener('keyup', function() {if (event.keyCode == 32) {document.body.style.overflow = "auto";}});

JavaScript 在按下空格键时使溢出隐藏 onkeydown 事件，因此它无法滚动，当您离开空格键时，它使溢出自动，因此可以再次滚动。这会更改页面的宽度，因此可以添加 CSS 以使滚动条消失。

【讨论】：

请添加此代码如何回答 OP 问题的说明