Sincronizar barra de desplazamiento: OnScroll Event

En días recientes he tenido la necesidad de sincronizar la barra de desplazamiento de varios paneles(llamados así en .net, en HTML son DIV); es decir, que al momento que el usuario mueva un panel, en automático se muevan los demás.

La implementación del ejercicio est hecha en c#, que realmente es poco código, el core del ejercicio está en JavaScript.

Paso 1: Agregar los paneles



Definición de los paneles:

<asp:Panel ID="Panel2" runat="server" Height="393px" ScrollBars="Horizontal" Style="z-index: 107; left: 31px; position: absolute; top: 141px" Width="1029px" BorderColor="Red" BorderStyle="Dashed" BorderWidth="1px">

Paso 2: Agregar atributos a los paneles con código .Net para que los DIVs(Paneles) capturen el evento onScroll.

protected void Page_Load(object sender, EventArgs e)
{
Panel1.Attributes.Add("onscroll", "javascript:scrollPanel1(this);");
Panel4.Attributes.Add("onscroll", "javascript:scrollPanel4(this);");
Panel6.Attributes.Add("onscroll", "javascript:scrollPanel6(this);");
}

Como podrán ver para cada Panel se ha creado una función scrollPanelX(this); esto obviamente podrá ser mejorado, para efectos de este ejemplo así lo dejaremos.

Paso 3: Agregar funciones JavaScript
Dado que este ejemplo está usando un MasterPage, debemos usar un Content Page. Para poder agregar código JavaScript a un Content Page sin tener que agregarlo en todo el Master Page usamo el siguiente script

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript">
function scrollPanel1(objDIV){
 var objToMove1 = document.getElementById("ctl00_ContentPlaceHolder1_Panel4");
 var objToMove2 = document.getElementById("ctl00_ContentPlaceHolder1_Panel6");
objToMove1.scrollLeft = objDIV.scrollLeft;
objToMove2.scrollLeft = objDIV.scrollLeft;
}
function scrollPanel4(objDIV){
 var objToMove1 = document.getElementById("ctl00_ContentPlaceHolder1_Panel1");
 var objToMove2 = document.getElementById("ctl00_ContentPlaceHolder1_Panel6");
objToMove1.scrollLeft = objDIV.scrollLeft;
objToMove2.scrollLeft = objDIV.scrollLeft;
}
function scrollPanel6(objDIV){
 var objToMove1 = document.getElementById("ctl00_ContentPlaceHolder1_Panel1");
 var objToMove2 = document.getElementById("ctl00_ContentPlaceHolder1_Panel4");
objToMove1.scrollLeft = objDIV.scrollLeft;
objToMove2.scrollLeft = objDIV.scrollLeft;
}
script>
.....

Los IDs de los controles son lo generados por .Net por eso hace referencia por ejemplo a: "ctl00_ContentPlaceHolder1_output"


Conclusión: El resultado, al mover un scroll de uno de los Panels(DIVs) en automático los demás de ajustarán para que siempre esten alineados.