垂直スクロールスナップjQuery

このjQuery: snapped scrolling - possible?とこのScrollable Panel snap to elements on Scrollを見てきました。しかし、彼らは本当に私が持っている質問に答えません。垂直スクロールスナップjQuery

私は実際にはウィンドウと同じ幅と同じ高さのdivを持っています。ユーザーがスクロールすると、左にうまく動きます。しかし、ユーザーがスクロールを停止したときに、このスクロールをスナップすることはできますか？したがって、コンテナは最初は左側に28pxの位置にあり、最初はスナップし、その後はスナップポイントに応じて207px後にスナップします。

--------------------- 
|-------------------|------------------- 
|     |     | 
|     |     |    
|-------------------|------------------- 
---------------------

分では、コンテナの幅を除いてjQueryを使用していません。

var numOfPosts = jQuery(".blog-post").length; 
var div5 = numOfPosts/5; 
var gutters = Math.ceil(div5)*10; 
var posts = Math.ceil(div5)*197; 
var postListWidth = gutters + posts + 9; 
var w = jQuery(window).width(); 
var h = jQuery(window).height(); 
    if(postListWidth<=w){ 
     jQuery(".post-list").width(w-28); 
    }else{ 
     jQuery(".post-list").width(postListWidth); 
    }

誰でもこれを達成するための最良の方法を知っていますか？私はコードを知っていることを好むので、解決策があれば説明できますか？私はjQueryを学んでいますが、私が知らない負荷があります.- 私は助けてくれてありがとう。

出典

2011-10-13 Tara Irvine

私はあなたが水平スクロールスナップを意味願っています。あなたの図から、それはあなたが何を意味するかのように見えます。その場合は、this jsfiddleに示されているものと同様のことを行うことができます。スクロールを最も近い間隔でアニメートするタイミングを知るには、this scrollstop event pluginを使用します。（scrollstopプラグインコードの後に配置される）、このプラグインのコードを使用する：

(function($) {  
    $.fn.scrollSnap = function(snapInterval) { 
     var mousedown = false; 

     function nearestInterval(n, iv) { 
      return Math.round(n/iv) * iv; 
     } 

     function snapToInterval() { 
      if(mousedown) { 
       $(window).one("mouseup", snapToInterval); 
      } else { 
       var $this = $(this), 
        snapLeft = nearestInterval($this.scrollLeft(), snapInterval); 

       $(this).animate({scrollLeft: snapLeft}); 
      } 
     } 

     $(window).mousedown(function() { mousedown = true }); 
     $(window).mouseup(function() { mousedown = false }); 

     this.each(function() { 
      $(this).bind("scrollstop", snapToInterval); 
     }); 
    } 
})(jQuery);

あなたはその後、スクロールバーを持つ要素でこれを使用することができます：