垂直滚动捕捉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);

然后您就可以使用滚动条上的元素使用：