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

Question

我有一个非常简单的游戏页面，我在iframe中有游戏。当我在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(); 
    }); 

谢谢您的帮助！

Answer 1

考虑在向下箭头事件处理程序使用stopPropagation到到达更高级别的容器（即window）停止该事件。

例如，在​​处理器的游戏：

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

如果您有需要的向下箭头事件（你不能修改这些功能stopPropagation），您可以更高级别的元素还使用preventDefault防止默认动作（滚动）：

function(e) { 
    if(e.keyCode == 40 /* Down arrow */) { 
    // Do your game stuff here. 
    e.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); 

注意，在主页上设置overflow:hidden具有这样如果你的游戏帧数低于第一屏幕高度（也许是由于头，横幅广告，安装有50个工具栏的用户（可能是不大可能的）副作用，使用较小的窗口或任何可能阻止显示完整游戏窗口的其他内容），那么它将被切断，用户无法向下滚动。

Answer 2

下面的代码片段使用javascript来设置css overflow hide/auto时点击一个按钮。

UPDATE：而不是一个按钮，你可以设置这些行动上的iframe焦点被触发。
实施例：<iframe src="http://www.yourgame.com" onfocus="offf()" onblur="onn()"></iframe>

function offf(){ 
 
document.getElementsByTagName("body")[0].style.overflowY = "hidden"; 
 
} 
 

 
function onn(){ 
 
document.getElementsByTagName("body")[0].style.overflowY = "auto"; 
 
}

body { 
 
    width: 100%; 
 
    height: 100vh; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    margin: 0px; 
 
} 
 

 
div { 
 
    background:honeydew; 
 
    width:100%; 
 
    height:150%; 
 
} 
 

 
button { 
 
    border: 2px solid black; 
 
} 
 

 
#a { 
 
    position:fixed; 
 
    left: 10px; 
 
    top: 10px; 
 
    background: gold; 
 
} 
 

 
#b { 
 
    left: 140px; 
 
    top: 10px; 
 
    position:fixed; 
 
    background: hotpink; 
 
}

<div><button id=a onClick="offf()">PLAY (hide scroll)</button><button id=b onClick="onn()">STOP (show scroll)</button></div>