Question

我正在使用一个使用键盘按键的脚本J＆amp; K在我博客上的文章之间滚动。现在的代码非常混乱，并且有一个错误，它目前只能工作一次...我想知道是否有一种更简单的方法来使用J＆amp; K键可以在帖子之间平滑滚动，因为这个脚本太大了，必须有一个更简单的方法。该脚本使用jQuery库和scrollto.js。基本上，我想要一个不同的脚本，当J＆amp;按下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是如此，它显示整个文章，包括填充顶部。

Answer 1

好的'代码很乱'对于Stack Overflow问题来说并不是真的可以接受。当事情变得混乱时，意味着你需要重构它。虽然看起来很小，但问题的正确方法是“我怎么能重构这段代码以保持干燥（不要重复自己）？”这就是我试过的。

此外，在minifiers和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
      });
    } 
  });
})();

键盘导航无法正常工作，代码很乱

1 个答案: