在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>