0

キーボード キー J & K を使用してブログの記事間をスクロールするスクリプトを使用しています。現在のコードは非常に乱雑で、現在 1 回しか機能しないというエラーがあります... 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 は、スクロールすると、パディングトップを含む記事全体が表示されるためです。

4

1 に答える 1

0

「コードが乱雑」というのは、スタック オーバーフローの質問には受け入れられません。何かが乱雑であるということは、それをリファクタリングする必要があることを意味します。ささいなことのように思えますが、「このコードをより DRY に保つために、このコードをリファクタリングするにはどうすればよいですか (繰り返さないでください)」という質問が正しい方法です。これが私が試したことです。

また、ミニファイヤと 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 に答える