title: Prevent SPACE and ARROW from scrolling [Game Iframe]
body: <p>I have a problem with preventing Space and Arrows to scroll down/up when the game is focused on an online gaming site for kids.</p>
  <p>To prevent this functionality on a web page, I know, we can use:</p>
  <pre><code>window.addEventListener(&quot;keydown&quot;, function(e) {
          if([&quot;Space&quot;,&quot;ArrowUp&quot;,&quot;ArrowDown&quot;,&quot;ArrowLeft&quot;,&quot;ArrowRight&quot;].indexOf(e.code) &gt; -1) {
              e.preventDefault();
          }
      }, false);
  </code></pre>
  <p><strong>But, the problem is when the game is focused.</strong></p>
  <p>The games are mirrored through <code>iframe</code> and once the user will click on the game and the game iframe will focus, the <code>code</code> from above will just not work anymore.</p>
  <p>Of course, it's frustrating because we have games where you need to use the Space or Up/Down Arrows to move, jump, or something else - but whenever you will press those buttons, the page will start scrolling.</p>
  <p>Page example:</p>
  <pre><code>...
  &lt;body&gt;
  &lt;iframe src=&quot;https://example.com/game/game21/index.html&quot; width=&quot;X&quot; height=&quot;Y&quot;&gt;&lt;/iframe&gt;
  ...
  </code></pre>
  <p>I don't have the right to modify the src page.</p>