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">
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
Los IDs de los controles son lo generados por .Net por eso hace referencia por ejemplo a: "ctl00_ContentPlaceHolder1_output"<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>
.....
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.
