Question

我的网站主要包含带照片的垂直页面。我希望访问者能够使用键盘上的箭头键（向上和向下，向左和向右）向上和向下移动。

我尝试了a code shared here at overflow，但我只能使用键盘上的向上箭头使其正常工作。当我按下其他箭头时没有任何反应。我在MacBook Pro上测试了OS X中的Chrome和Firefox。 View my test-page

我可以做些代码修改吗？

这是我尝试过的代码：

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);

Answer 1

如果页面不比屏幕宽，则向左和向右滚动不会起作用。您已将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);

启用箭头键可以导航垂直页面

1 个答案: