Przewijanie w pionie jQuery

Question

Przyjrzałem się temu jQuery: snapped scrolling - possible? i temu Scrollable Panel snap to elements on Scroll. Ale tak naprawdę nie odpowiadają na moje pytanie.

Mam divy, które są naprawdę szerokie, ale mają taką samą wysokość jak okna. Przesuwa się delikatnie w lewo, gdy użytkownik przewija. Ale czy mogę, aby ten przewijacz się zatrzasnął, gdy użytkownik przestanie przewijać. Pojemnik znajduje się na początku po lewej stronie 28 pikseli po lewej stronie i chcę go zatrzasnąć na początku, a następnie co 207 pikseli później, w zależności od tego, który punkt przyciągania znajduje się bliżej użytkownika.

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

W tej chwili nie używam jQuery za dużo oprócz szerokości kontenera.

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

Czy ktoś wie najlepszy sposób, aby to osiągnąć? Wolałbym znać kod, więc jeśli istnieje rozwiązanie, możesz to wyjaśnić? Uczę się jQuery, ale jest mnóstwo rzeczy, o których nie wiem --.- Bardzo dziękuję za każdą pomoc, jaką otrzymuję.

Answer 1

Mam nadzieję, że masz na myśli poziomego przewijania przystawki. Z twojego wykresu wygląda bardziej na to, co masz na myśli. W takim przypadku możesz zrobić coś podobnego do tego, co zostało zademonstrowane w this jsfiddle. Używa this scrollstop event plugin, aby wiedzieć, kiedy animować swój zwój do najbliższego przedziału. Za pomocą tego kodu wtyczki (umieszczony po kodzie wtyczki 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); 

Będziesz wtedy mógł korzystać z tego na elementach z pasków przewijania:

$("#scrollWrapper").scrollSnap(207); 

Dla zbudowana wcześniej rozwiązania, warto sprawdź jQuery Tools Scrollable.

Answer 2

Jeśli nie jesteś przeciwny używaniu większej ilości jQuery, spróbuj jQuery UI Slider. Ma opcję snapowania. Te przykłady powinny być pomocne.

Used as Scrollbar

Scroll tabs