Desplazar 2 barras de desplazamiento con jquery al mismo tiempo

Question

¿Es posible desplazar 2 barras de desplazamiento con una barra de desplazamiento?

Answer 1

Todo lo que necesitas hacer es atar la propiedad scrollTop de un elemento al scrollTop de la otra, usando una función vinculada al evento scroll.

Algo a lo largo de las líneas de:

$('.linked').scroll(function(){ 
    $('.linked').scrollTop($(this).scrollTop());  
}) 

Con esta función, todos los elementos con una clase de linked se desplazará cada vez que utilice las barras de desplazamiento de uno de ellos. (Supuse desplazamiento vertical, si quería horizontal, haga lo mismo pero con scrollLeft)

Vea http://jsfiddle.net/g8Krz/510/ para un ejemplo de trabajo de los anteriores.

Answer 2

(anexar beeglebug):

Para horizontal uso 'ligada' desplazamiento:

$('.linked').scroll(function(){ 
    $('.linked').scrollLeft($(this).scrollLeft()); 
}); 

Answer 3

Quiero añadir una pequeña mejora a la solución de beeglebug (que ya está trabajando casi perfecto).

Si descubre muy lento SCROLLING utilizando el mouseWheel en algunos navegadores (por ejemplo, Opera), trata de usar identificadores únicos para los DIVs en lugar de la clase:

$('#master').scroll(function(){ 
$('#slave').scrollTop($(this).scrollTop()); 
}); 

he tenido este problema y probé muchas soluciones, pero esta finalmente fue la más fácil. Tomando una suposición salvaje, yo diría que OPERA tiene algunos problemas de rendimiento al identificar los DIV por clase todo el tiempo cuando se desplaza. (Apenas notado aumento masivo en el uso de la CPU durante el uso de la clase como identificador)

Answer 4

Si usted está experimentando lento desplazamiento cuando está usando la rueda del ratón sobre la vinculación de las barras de desplazamiento con solución beeglebug, aquí es un truco para solucionarlo.

Lo bueno es que es un poco compacta y no utiliza ningún ID, únicas clases, mucho más sostenible.

// First add the class "linked-scrollbar" to the elements you want to link 

// Then manually or dynamically add an attribute which will contain 
// the data if the element is currently scrolling or not 
$('.linked-scrollbar').attr("data-scrolling", "false"); 

$('.linked-scrollbar').scroll(function(){ 
    if($(this).attr("data-scrolling") == "false"){ 
     $('.linked-scrollbar').not(this).attr("data-scrolling", "true"); 
     $('.linked-scrollbar').not(this).scrollLeft($(this).scrollLeft()); 
    } 
    $(this).attr("data-scrolling", "false"); 
}); 

Aquí hay un jsfiddle que muestra ese error y la solución.