sincronizando dos barras de desplazamiento en javascript

¿Cómo puedo sincronizar dos barras de desplazamiento verticales en Javascript?

Tengo dos divs de la misma altura y quiero poder desplazarme por ambos con una sola barra de desplazamiento.

Esto es lo que he intentado hasta ahora.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script language="javascript" type="text/javascript">
    function OnScroll(div) {
        //if ($.get('div1') != null)
        //    $.get('div1').scrollTop = div.scrollTop;
        var d2 = document.getElementById("div2");
        //d2.offsetTop;
        var d1 = document.getElementById("div1");
        d1.style.top = d2.offsetTop;

       // document.getElementById("div1").offsetTop = d2.offsetTop;
    }
</script>
Start of panel<br />
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
End of panel<br />
<br />
start of table
<table>
    <tr>
        <td>
            <div id="div1" style="max-width: 300px; max-height: 500px; overflow-x: auto;        overflow-y: auto;">
                <asp:Table ID="Table1" runat="server">
                </asp:Table>
            </div>
        </td>
        <td>
            <div id="div2" style="max-width: 300px; max-height: 500px; overflow: auto;" onscroll="OnScroll(this)">
                <asp:Table ID="Table2" runat="server">
                </asp:Table>
            </div>
        </td>
    </tr>
</table>
end of table

Entonces, básicamente, cada vez que se llama a un evento onscroll en div2, llama a la función javascript que se supone que establece div1 en el mismo desplazamiento.

¡Gracias!

preguntado el 12 de junio de 12 a las 20:06

1 Respuestas

no necesitas usar scrollTop?

function OnScroll(div) {
    var d1 = document.getElementById("div1");
    d1.scrollTop = div.scrollTop;
}

Creo que podría haber un problema si configuras scrollTop a un valor que está por encima de su máximo.

Respondido el 12 de junio de 12 a las 20:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.