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, nextandもおそらく使用する必要がありますs。上下以外の何かが押された場合、現在のコードは不規則に動作します。

于 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 に答える