4

我有一个功能，当按下键盘上的向下箭头时向下滚动到文章的下一部分，当按下向上箭头时向上滚动。它工作正常，但是在滚动之前会有轻微的“反弹”或“抖动”。

我可以通过让函数返回 false 来部分解决这个问题，但是，返回 false 会吞下按键事件，使我无法使用键盘与浏览器交互。

关于如何在释放键盘的同时消除“抖动”的任何想法？

var $sections = $('.section');
var curr = -1;

$(document).keydown(function(e){
  prev = (curr < 0)? $sections.length-1: curr-1;
  next = (curr >= $sections.length-1)? -1: curr+1 ;

  switch (e.keyCode) {
    case 38:  // up key
      s = $sections.eq(prev).offset().top;
      curr = prev;
      break;
    case 40:  // down key
      s = $sections.eq(next).offset().top;
      curr = next;
      break;
    default:
      break;
  } 

  if (curr == -1 ){
    $('html, body').animate({scrollTop: 0}, 'slow');
  }
  else{
    $('html, body').animate({scrollTop: s}, 'slow');
  }
  return e;
});
4

2 回答 2

3

大概您可以简单地添加一个简单的语句，该语句仅在上下匹配if时才执行滚动代码：keyCode

$(document).keydown(function(e) {
    if (e.keyCode === 38 || e.keyCode === 40) {
        // Your code
        return false;
    }
});

这是一个有效的简单演示：http: //jsfiddle.net/yijiang/SceDY/1/

查看代码，您可能还应该使用var关键字来限制变量的范围prev，next并且s. 如果按下 up 和 down 以外的任何其他内容，当前代码的行为就会不稳定。

于 2010-11-17T08:26:59.893 回答
0

谢谢Yi ...作为替代方案...我只是通过将默认开关盒设置为返回e来使其工作。然后函数底部的return返回false。

结果如下所示：

var $sections = $('.section');
var curr = -1;

$(document).keydown(function(e){
  prev = (curr < 0)? $sections.length-1: curr-1;
  next = (curr >= $sections.length-1)? -1: curr+1 ;

  switch (e.keyCode) {
    case 38:  // up key
      s = $sections.eq(prev).offset().top;
      curr = prev;
      break;
    case 40:  // down key
      s = $sections.eq(next).offset().top;
      curr = next;
      break;
    default:
      return e;
  } 

  if (curr == -1 ){
    $('html, body').animate({scrollTop: 0}, 'slow');
  }
  else{
    $('html, body').animate({scrollTop: s}, 'slow');
  }
  return false;
});
于 2010-11-17T08:40:33.367 回答