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.
