0

我正在使用一个脚本，它使用键盘键 J 和 K 在我的博客上的文章之间滚动。现在的代码非常混乱，并且有一个错误，它目前只能运行一次......我想知道是否有更简单的方法可以使用 J & K 键在帖子之间平滑滚动，因为这个脚本就是这样大，必须有一个更简单的方法。该脚本使用 jQuery 库和 scrollto.js。基本上，我想要一个不同的脚本，当按下 J & 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 是这样，当它滚动时，它会显示整篇文章，包括 padding-top。

4

1 回答 1

0

好吧，对于 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
      });
    } 
  });
})();
于 2012-07-13T03:06:09.537 回答