Desplazamiento de desplazamiento vertical jQuery

Question

He echado un vistazo a este jQuery: snapped scrolling - possible? y este Scrollable Panel snap to elements on Scroll. Pero realmente no responden la pregunta que tengo.

Tengo un divs que es realmente ancho pero a la misma altura que una ventana. Se mueve bien hacia la izquierda cuando el usuario se desplaza. Pero ¿puedo hacer que este desplazador se rompa cuando el usuario deja de desplazarse? Así que el contenedor se sienta 28px a la izquierda al principio y quiero que encaje al principio y luego cada 207px después de eso, dependiendo de qué punto de cierre esté más cerca el usuario.

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

Por el momento no estoy usando jQuery por mucho, excepto por el ancho del contenedor.

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

¿Alguien sabe la mejor manera de lograrlo? Preferiría saber el código así que si hay una solución ¿puedes explicarlo? Estoy aprendiendo jQuery pero hay muchas cosas que no sé sobre -.- Muchas gracias por cualquier ayuda que reciba.

Answer 1

estoy esperando que quiere decir complemento de desplazamiento horizontal. De su diagrama parece más que eso es lo que quiere decir. Si ese es el caso, podría hacer algo similar a lo que se demuestra en this jsfiddle. Utiliza this scrollstop event plugin para saber cuándo animar su desplazamiento al intervalo más cercano. El uso de este plugin de código (que se encuentra después del código del 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); 

a continuación, será capaz de utilizar esto en elementos con barras de desplazamiento:

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

Para una solución de pre-compilados, es posible que desee echa un vistazo a jQuery Tools Scrollable.

Answer 2

Si no se opone a utilizar más jQuery, intente con el control deslizante jQuery UI. Tiene una opción snaping. Estos ejemplos deberían ser útiles.

Used as Scrollbar

Scroll tabs