Prevent arrow key from scrolling with keydown event

Question

I have a game captured inside of an Iframe within my body. Problem is, the entire page scrolls when the arrow keys are pressed. How can I prevent this? I don't want to disable scrolling with the arrow keys alogether, only when the game is being played.

Answer 1

Use a variable as a flag and add an event listener to see if that flag is present, if so, disable the key: Live demo here (click).

var flag = true;

document.body.addEventListener('keydown', function(e) {
  var badKey = 40; //down array keyCode
  if (flag && e.keyCode === badKey) {
    e.preventDefault();
  }
});

Answer 2

您可以根据情况（例如玩游戏时）应用按键侦听器并停止特定输入的正常功能