在iframe中玩游戲時禁用滾動父頁面

Question

我有一個非常簡單的游戲頁面，其中有iframe游戲。 在iframe中玩游戲時，我想禁用主頁上的滾動。 我試過了overflow：hidden，但是它完全禁用了滾動，這是沒有用的。

當頁面長於屏幕時，按下向下箭頭會向下滾動頁面，使游戲無法進行。

有基本的方法可以在播放過程中禁用滾動嗎？

游戲輸入偵聽器：

/*
 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

以下代碼段在單擊按鈕時使用javascript設置css溢出隱藏/自動。

更新： 您可以將這些操作設置為在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> 

Answer 2

考慮在向下箭頭事件處理程序中使用stopPropagation ，以阻止事件到達更高級別的容器（即window ）。

例如，在游戲的keydown處理程序中：

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層的工具欄（可能不太可能）的副作用，使用較小的窗口，或其他可能阻止整個游戲窗口顯示的內容），則將其關閉，而用戶無法向下滾動。