prevent iframe from scrolling

Question

So I'm making a JS based game for the browser and there's a ton of content that I want to hide from the viewer of the game and I've utilized an iframe for this. The thing is in some browsers when you hit the spacebar , it automatically scrolls the screen down and when players hit the spacebar the inside of the page gets scrolled and what I want the players to see ends up off screen. so I'm wondering is there any ways to prevent the iframe from scrolling altogether. (I do have scrolling="no" as one of the iframe properties and it's not doing the trick)

I've also tried overflow:hidden; in CSS but that doesn't seem to help. it stops browsers in the iOS and Android browsers from being able to scroll off but in desktop browsers the problem is still there.

here's what i did

<iframe id="gameframe" name="Double Edge" height="576" width="1024" src="gameStart.html" scrolling="no"></iframe>

in css:

.gameframe{ overflow:hidden;}

Thanks

Answer 1

If you have content on the page that you want to hide from the user but need it to do something you should use "display:none" . So there is nothing to scroll and you do not have to handle different posibilities how a user could reach your hidden content.

Answer 2

try adding this onload

var el = document.createElement("iframe");
 var iframe_style = "overflow:hidden; margin:0;padding:0;"
 var ifattr = {
        id: 'my_iframe', width: '520', height: '300', 'scrolling': 'no', 'marginWidth':0,
        'marginHeight':0, 'noResize': 0, 'border': 0, 'frameBorder':0, 'frameSpacing':0,
        'background': 'transparent','allowTransparency': 'allowTransparency',
        'name' :'my_iframe','style':iframe_style};

 for (var i in ifattr) {
      el.setAttribute(i, ifattr[i]);
 }a