垂直滾動捕捉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);

然後您就可以使用滾動條上的元素使用：