Question

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

我能够通过让函数返回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;
});

Answer 1

据推测，您只需添加一个简单的if语句，只有在keyCode上下匹配时才会执行滚动代码：

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

以下是对此有效的简单演示：http://jsfiddle.net/yijiang/SceDY/1/

查看代码时，您可能还应使用var关键字来限制变量[{1}}，prev和next的范围。如果按下除了向上和向下之外的任何其他内容，则当前代码表现不正常。

Answer 2

谢谢Yi ...作为替代......我只是通过设置默认开关案例来返回e来实现它。然后函数底部的返回值返回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;
});

使用jQuery scrollTop时消除抖动

2 个答案: