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 overflow hide / auto。

更新： 您可以将这些操作设置为在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>

{{1}}

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个工具栏，使用较小的窗口，或任何其他可能阻止完整游戏窗口显示的窗口，然后它将被切断，用户无法向下滚动。

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

2 个答案: