启用箭头键浏览垂直页面

BjarteEdvardsen 发表于 Dev

比耶特·爱德华森

我有一个网站，主要由带有照片的垂直页面组成。我希望访问者能够使用键盘上的箭头键（上/下，左和右）上下移动。

我在溢出时尝试了在此处共享的代码，但只能使它与键盘上的向上箭头一起向上工作。当我按下其他箭头时，什么也没有发生。我已经在MacBook Pro的OS X中的Chrome和Firefox中进行了测试。查看我的测试页。

我可以做一些代码修改来使其工作吗？

这是我尝试的代码：

var handler = function(e) {
e = e || window.event;
var k = e.keyCode || e.which;
switch(k) {
  case 37:
    document.body.scrollLeft -= 1000;
    document.documentElement.scrollLeft -= 1000;
    break;
  case 38:
    document.body.scrollTop-= 1000;
    document.documentElement.scrollTop-= 1000;
    break;
  case 39:
    document.body.scrollLeft += 1000;
    document.documentElement.scrollLeft += 1000;
    break;
  case 40:
    document.body.scrollLeft += 1000;
    document.documentElement.scrollLeft += 1000;
    break;
  default: return true;
  }
  if( e.preventDefault) e.preventDefault();
  return false;
};
if( window.attachEvent) window.addEvent("onkeydown",handler,false);
else window.addEventListener("keydown",handler,false);

最高

如果页面不比屏幕宽，则左右滚动将不起作用。您已将scrollLeft分配给键40（向下），因此不会发生任何事情。下面的代码已得到纠正，并且可以上下运行：

var handler = function(e) {
e = e || window.event;
var k = e.keyCode || e.which;
switch(k) {
  case 37:
    console.log("37 pressed");
    document.body.scrollLeft -= 1000;
    document.documentElement.scrollLeft -= 1000;
    break;
  case 38:
    console.log("38 pressed");
    document.body.scrollTop-= 1000;
    document.documentElement.scrollTop-= 1000;
    break;
  case 39:
    console.log("39 pressed");

    document.body.scrollLeft += 1000;
    document.documentElement.scrollLeft += 1000;
    break;
  case 40:
    console.log("40 pressed");
    document.body.scrollTop += 1000;
    document.documentElement.scrollTop += 1000;
    break;
  default: return true;
}
if( e.preventDefault) e.preventDefault();
return false;
}; 
if( window.attachEvent) window.addEvent("onkeydown",handler,false);
else window.addEventListener("keydown",handler,false);