Chụp nhanh cuộn dọc jQuery

Tôi đã xem qua số jQuery: snapped scrolling - possible? và Scrollable Panel snap to elements on Scroll này. Nhưng họ không thực sự trả lời câu hỏi tôi có.Chụp nhanh cuộn dọc jQuery

Tôi có một divs thực sự rộng nhưng có cùng chiều cao như cửa sổ. Nó di chuyển sang bên trái độc đáo khi người dùng cuộn. Nhưng tôi có thể có được cuộn này để chụp khi người dùng ngừng cuộn. Vì vậy, các container nằm 28px bên trái lúc đầu và tôi muốn nó để chụp ở đầu và sau đó mỗi 207px sau đó tùy thuộc vào điểm snap người dùng là gần gũi hơn.

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

Vào phút tôi không sử dụng jQuery nhiều ngoại trừ chiều rộng của vùng chứa.

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); 
    }

Có ai biết cách tốt nhất để đạt được điều này không? Tôi muốn biết mã vì vậy nếu có một giải pháp bạn có thể giải thích nó? Tôi đang học jQuery nhưng có rất nhiều thứ mà tôi không biết về -.- Cảm ơn rất nhiều vì đã giúp tôi.

Nguồn

2011-10-13 Tara Irvine

tôi hy vọng bạn có nghĩa là chụp cuộn ngang. Từ sơ đồ của bạn, nó trông giống như ý của bạn. Nếu đó là trường hợp, bạn có thể làm một cái gì đó tương tự như những gì được thể hiện trong this jsfiddle. Nó sử dụng this scrollstop event plugin để biết thời điểm tạo hoạt ảnh cho cuộn của bạn đến khoảng thời gian gần nhất. Sử dụng mã này plugin (đặt sau khi mã 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);

Sau đó bạn sẽ có thể sử dụng điều này trên các yếu tố với thanh cuộn: