防止 SPACE 和 ARROW 滚动 [Game Iframe]答案

【问题标题】：Prevent SPACE and ARROW from scrolling [Game Iframe]防止 SPACE 和 ARROW 滚动 [Game Iframe]
【发布时间】：2021-03-14 09:59:32
【问题描述】：

当游戏专注于儿童在线游戏网站时，我无法阻止 Space and Arrows 向下/向上滚动。

为了防止网页上出现此功能，我知道，我们可以使用：

window.addEventListener("keydown", function(e) {
        if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
            e.preventDefault();
        }
    }, false);

但是，问题在于游戏的重点。

游戏通过iframe 进行镜像，一旦用户点击游戏并且游戏iframe 将聚焦，上面的code 将不再起作用。

当然，这很令人沮丧，因为在我们的游戏中，您需要使用空格键或向上/向下箭头来移动、跳跃或其他东西 - 但只要您按下这些按钮，页面就会开始滚动。

页面示例：

...
<body>
<iframe src="https://example.com/game/game21/index.html" width="X" height="Y"></iframe>
...

我没有修改src页面的权限。

【问题讨论】：

您是否尝试在/game/game21/index.html 中使用 css 将正文溢出设置为无？ body { overflow:none;width:100vh;height:100vh}
@Daantje，我试过了，但没有帮助。如果它有帮助，这里是一个例子 - 请记住问题在 Firefox 中是活跃的，而不是在 Chrome 中。 link
那么在iframe中添加代码？

标签： javascript html scroll keydown preventdefault

【解决方案1】：

你错过了e.stopPropagation();。试试这个：

window.addEventListener("keydown", function(e) {
    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
        e.preventDefault();
        e.stopPropagation();
    }
});

【讨论】：

在测试后更正了我的评论；）
您的最新解决方案似乎可以正常工作！谢谢！ :)