Javascript 在iframe中玩游戏时禁用滚动父页面

我有一个非常简单的游戏页面，其中我有iframes中的游戏。我想在iframe中玩游戏时禁用主页面上的滚动。我尝试过溢出：隐藏，但它完全禁用滚动，这是无用的

当页面比屏幕长时，按下向下箭头将向下滚动页面，使游戏无法进行

有没有一种基本的方法可以在播放过程中禁用滚动

游戏输入侦听器：

/*
 This simply library keeps the state of the currently
 pressed keys by using keydown and keyup event handlers.
 */
(function() {
    var pressedKeys = {};
    function setKey(event, status) {
        var code = event.keyCode;
        var key;
        switch(code) {
        case 32:
            key = 'SPACE'; break;
        case 37:
            key = 'LEFT'; break;
        case 38:
            key = 'UP'; break;
        case 39:
            key = 'RIGHT'; break;
        case 40:
            key = 'DOWN'; break;
        default:
            // Convert ASCII codes to letters
            key = String.fromCharCode(code);
        }
        pressedKeys[key] = status;
    }
    document.addEventListener('keydown', function(e) {
        setKey(e, true);
        e.stoppreventDefault();
    });

---

谢谢你的帮助

下面的代码段使用javascript在单击按钮时设置css溢出隐藏/自动

更新：您可以将这些操作设置为在iframe焦点上触发，而不是按钮。
示例：

函数offf（）{
document.getElementsByTagName（“正文”）[0].style.overflowY=“隐藏”；
}
函数onn（）{
document.getElementsByTagName（“正文”）[0].style.overflowY=“自动”；
}

正文{
宽度：100%；
高度：100vh；
溢出y：自动；
溢出x：隐藏；
边际：0px；
}
div{
背景：蜜露；
宽度：100%；
身高：150%；
}
钮扣{
边框：2件纯黑；
}
#a{
位置：固定；
左：10px；
顶部：10px；
背景：金；
}
#b{
左：140像素；
顶部：10px；
位置：固定；
背景：火红；
}

播放（隐藏滚动）停止（显示滚动）

考虑在向下箭头事件处理程序中使用，以阻止事件到达更高级别的容器（即

窗口

）

例如，在游戏的

keydown

处理程序中：

function(e) {
  if(e.keyCode == 40 /* Down arrow */) {
    // Do your game stuff here.
    e.stopPropagation();
  }
}

如果您有更高级别的元素需要向下箭头事件（并且您不能将这些函数修改为

stopPropagation

），您还可以使用来阻止默认操作（滚动）：

或者，如果您不想或无法修改游戏代码，也可以在窗口级别吞下所有向下箭头事件

window.addEventListener("keydown", function(e) {
  if(e.keyCode == 40 /* Down arrow */) {
    e.preventDefault(); // prevents the "default" action from happening, in this case, scrolling down.
  }
}, false);

---

请注意，在主页上设置

overflow:hidden

会产生（可能不太可能）副作用，如果游戏框架低于第一个屏幕高度（可能是由于标题、横幅广告、用户安装了50个工具栏、使用较小的窗口或其他任何可能阻止显示完整游戏窗口的原因），然后它将被切断，用户无法向下滚动。

？是否希望

溢出：隐藏的
是临时的（仅在播放时）？是的，我只想在播放时禁用它，因为页面比屏幕长（注释等）。按下向下箭头可向下滚动页面，让游戏不可能播放。考虑在下拉箭头事件处理程序中使用以阻止事件到达更高级别的容器（即<代码>窗口< /代码>）。注意设置“代码>溢出：主页上的隐藏< /代码>有可能（不太可能）的副作用，如果您的游戏框低于第一屏幕高度。（可能是由于标题、横幅广告、用户安装了50个工具栏、使用了较小的窗口或其他任何可能阻止显示完整游戏窗口的原因），那么它将被切断，用户无法向下滚动。ps：您也可以使用
位置：修复游戏；
（忽略滚动）。当我开始播放时，它仅禁用一秒钟。页面再次开始滚动。你是说焦点事件？抱歉，我以为它会起作用，但我没有办法尝试。无论如何，你仍然可以在“播放”按钮上使用它；preventDefault（）解决了我的问题，你救了我一天：）。非常感谢。
window.addEventListener("keydown", function(e) {
  if(e.keyCode == 40 /* Down arrow */) {
    e.preventDefault(); // prevents the "default" action from happening, in this case, scrolling down.
  }
}, false);