¿Cómo puedo hacer que una barra de desplazamiento solo se desplace a intervalos fijos?

Tengo un contenedor div con tamaño fijo y desbordamiento: scroll, está lleno de divs más pequeños formando una especie de lista. he aquí un ejemplo de violín: http://jsfiddle.net/etYSC/2/¿Cómo puedo hacer que una barra de desplazamiento solo se desplace a intervalos fijos?

Lo que quiero es que el desplazamiento nunca corte una caja, mostrando siempre 3 cuadros completos (en este ejemplo), por lo que se desplazará siempre un número fijo de píxeles.

¿Cómo puedo hacer esto?

Estoy usando la biblioteca jquery.

Google ha sido una amante dura en esta cuestión debido a las palabras clave engañosas.

- solución

que era capaz de refinar código kiranvj un poco más y estoy muy satisfecho con el resultado final.

de tomar la div anterior:

var scrollTimerHandle = ""; 
var positionTimerHandle = ""; 

$("#container").scroll(function() { 
    var boxSize = 84; 
    var newScrollPosition = parseInt(this.scrollTop/boxSize) * boxSize, 
    _this = this; 

    clearInterval(scrollTimerHandle); 
    scrollTimerHandle = setTimeout(function() { 
     positionTimerHandle = setInterval(function(){ 
      if (_this.scrollTop == newScrollPosition){ 
      clearInterval(positionTimerHandle);     
      } else { 
      _this.scrollTop--; 
      } 
     }, 5);   

    }, 600); 
});

http://jsfiddle.net/etYSC/7/

ajuste a la div cercano

var scrollTimerHandle = ""; 
var positionTimerHandle = ""; 

$("#container").scroll(function() { 
var boxSize = 84;  
var preScrollPosition = parseInt(this.scrollTop/boxSize) * boxSize; 
var newScrollPosition = this.scrollTop - preScrollPosition < boxSize /2 
          ? preScrollPosition : preScrollPosition + boxSize; 
_this = this; 

clearInterval(scrollTimerHandle); 

    scrollTimerHandle = setTimeout(function() { 
     positionTimerHandle = setInterval(function(){  
      if (_this.scrollTop == newScrollPosition){ 
      clearInterval(positionTimerHandle); 
      } else { 
       if (_this.scrollTop > newScrollPosition){ 
       _this.scrollTop--; 
       } else { 
       _this.scrollTop++; 
       }   
      } 
     }, 5);  

    }, 700); 
});

http://jsfiddle.net/etYSC/8/

Gracias por toda la ayuda, estaba perdido en cómo abordar esto y aprendí un buen negocio hoy.

Fuente

2012-08-10 petervaz

Esta es una pregunta difícil, porque si no me equivoco, sólo inspeccionar la posición de desplazamiento * después de * se produce el desplazamiento. Eso significa que, si fuerza el desplazamiento en incrementos (en este caso, la altura de sus bloques), habrá una gran cantidad de tartamudeo a medida que el contenedor se desplaza unos pocos píxeles y luego salta hacia atrás o hacia adelante. Puede eliminar la barra de desplazamiento por completo y proporcionar sus propios botones que desplazan el contenedor en el incremento deseado. – jackwanders

@kiranvj obtuvo mi forma definitiva, no es como me imaginé cuando pregunté, pero me gusta más. gracias por tu ayuda. – petervaz

una solución perfecta.

Pero algo como esto debería funcionar (NB: necesidad de refinar)

$("#container").scroll(function() { 

    this.scrollTop = parseInt(this.scrollTop/84) * 84; // 84 = height + top and bottom margin 

});

violín aquí http://jsfiddle.net/R7tAK/1/

actualización

Algunos lo refinado código de los anteriores, sin otros complementos o libs. (Parpadeo retirado)

var scrollTimerHandle = ""; 

$("#container").scroll(function() { 

var newScrollPosition = parseInt(this.scrollTop/84) * 84, 
    _this = this; 

    clearInterval(scrollTimerHandle); 

scrollTimerHandle = setTimeout(function() { 
    _this.scrollTop = newScrollPosition ; 

}, 1000); 


});

juegan aquí http://jsfiddle.net/R7tAK/4/

Fuente

2012-08-10 13:50:50 kiranvj

Esto funciona como un amuleto, estoy bastante seguro de que se ajustará a mi código. Muchas gracias por la ayuda. – petervaz

Veo mucha inestabilidad en el desplazamiento, como mencioné en mi comentario anterior. – jackwanders

Como se menciona en la respuesta es un código básico muy básico, necesita refinar más y puede agregar alguna lógica circundante. O necesita agregar un desplazamiento personalizado como y usar alguna lógica similar – kiranvj

Probablemente va a tener que quitar la barra de desplazamiento y usar un carrusel, ya que está utilizando jQuery puede usar el complemento jCarousel. Aquí hay un ejemplo usando un vertical carousel

Fuente

2012-08-10 13:35:40 JaredMcAteer

Gracias por el awser pero lo que necesita es demasiado simple para agregarle este carrusel y no se verá bien. Este es un buen plugin, sin embargo. – petervaz

El aspecto del carrusel depende completamente de cómo lo diseñe, el ejemplo no es la única forma en que debe lucir. – JaredMcAteer

Usted puede probar este código si entiendo que la derecha:

$("#container").scroll(function(){ 
     if($("#container").scrollTop()>=10) { 
      $("#container").scrollTop(10); 
     } 
    } 
);

http://jsfiddle.net/nnwsx/

Fuente

2012-08-10 13:43:18 LLAlive

Eso no funciona; lo único que hace es evitar que el usuario se desplace más de 10 píxeles hacia abajo en la página. – jackwanders

Eso no era del todo correcto. Pero puede usar scrollTop (x) para desplazarse hacia abajo para la posición fija. – LLAlive

Aquí hay una opción que sustituye a la barra de desplazamiento con algunos botones de desplazamiento.He quitado la barra de desplazamiento mediante el establecimiento de overflow:hidden; en #container

HTML

<div id="container"> 
    <!-- your blocks --> 
</div> 
<div id="buttons"> 
    <button id="scrollUp">Up</button> 
    <button id="scrollDown">Down</button> 
</div>

Javascript

var container = $('#container'); 
var inc = 84; 
$('#scrollUp').on('click',function(){ 
    container.scrollTop(container.scrollTop()-inc); 
});   
$('#scrollDown').on('click',function(){ 
    container.scrollTop(container.scrollTop()+inc); 
});

jsFidle DEMO

Fuente

2012-08-10 14:02:05 jackwanders

¿Cómo puedo hacer que una barra de desplazamiento solo se desplace a intervalos fijos?

Respuesta

Cuestiones relacionadas