键盘导航工作不正常，代码混乱

Keyboard navigation is not working correctly and the code is messy

本文关键字：代码 混乱 不正常 导航 工作 键盘      更新时间：2023-09-26

我使用的脚本使用键盘键J&K在我博客上的文章之间滚动。现在的代码非常混乱，并且有一个错误，它目前只工作一次。。。我想知道是否有更简单的方法来使用J&K键可以在帖子之间平滑滚动，因为这个脚本太大了，必须有一个更简单的方法。这个脚本使用的是jQuery库和scrollto.js；按下K键。

        window.viewport = { height: function() { return $(window).height(); }, width: function() { return $(window).width(); }, scrollTop: function() { return $(window).scrollTop(); }, scrollLeft: function() { return $(window).scrollLeft(); } }; $.belowthefold = function(element, settings) { var fold = $(window).height() + $(window).scrollTop(); return fold <= $(element).offset().top - settings.threshold; }; $.abovethetop = function(element, settings) { var top = $(window).scrollTop(); return top >= $(element).offset().top + $(element).height() - settings.threshold; }; $.rightofscreen = function(element, settings) { var fold = $(window).width() + $(window).scrollLeft(); return fold <= $(element).offset().left - settings.threshold; }; $.leftofscreen = function(element, settings) { var left = $(window).scrollLeft(); return left >= $(element).offset().left + $(element).width() - settings.threshold; }; $.inviewport = function(element, settings) { return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings); }; $.extend($.expr[':'], { "below-the-fold": function(a, i, m) { return $.belowthefold(a, {threshold : 0}); }, "above-the-top": function(a, i, m) { return $.abovethetop(a, {threshold : 0}); }, "left-of-screen": function(a, i, m) { return $.leftofscreen(a, {threshold : 0}); }, "right-of-screen": function(a, i, m) { return $.rightofscreen(a, {threshold : 0}); }, "in-viewport": function(a, i, m) { return $.inviewport(a, {threshold : 0}); } }); 

        $(document).keypress(function( event ) { 
        if(event.which === 106) { 
            var currPost = $('article:in-viewport').eq(0); 
            var target = $(currPost).next('article'); 
            $.scrollTo( $(target), {
                duration: 400, 
                axis: "y", 
                offset: -120
            }); 
        }
        else if(event.which === 107) { 
            var currPost = $('article:in-viewport').eq(0); 
            var target = $(currPost).prev('article'); 
            $.scrollTo( $(target), {
                duration: 400, 
                axis: "y",
                offset: -120
            }); 
        }
    });

博客我正在使用脚本-http://jtestblog1.tumblr.com/编辑：偏移量-120是这样的，当它滚动时，它会显示整个文章，包括填充顶部。

对于Stack Overflow问题来说，"代码混乱"是不可接受的。当某个东西很乱时，这意味着你需要重构它。虽然这看起来很琐碎，但正确的提问方式是"我如何重构这个代码以保持它更干燥（不要重复）？"？这是我试过的。

此外，在minifier和gzip时代，代码长度不应该是你关心的问题——它应该是代码的可读性和可重用性。

话虽如此，开关是清理按键情况的常用方法。

(function(){
  var position = null;
  $(window).keypress(function( e ) {
    var posts = $('article');
    // note, it would probably be more reliable to start `position` at 0
    // and just get rid of this selector, but this works.
    if(position == null){
      position = posts.find(':in-viewport').first().index();
    }
    var keys = {
      k: 106,
      j: 107
    };
    switch (e.which) {
      default:
      case keys['k']:
        position++;
        break;
      case keys['j']:
        position--;
        break;
    }
    // fixes looping.
    if(position == posts.length+1){
      position = 0;
    } else if (position == -1){
      position = posts.length;
    }
    var target = $(posts[position]);
    // Don't try to scroll on something that doesn't match.
    if( target.length > 0 ) {
      $.scrollTo(target, {  // target doesn't need to be wrapped twice, 
        duration: 400,      // it is already a $ object.
        axis: "y",
        offset: -120
      });
    } 
  });
})();
相关文章：