Question

How can I sync two vertical scrollbars in Javascript?

I have two divs of the same height, and I want to be able to scroll both of them with a single scrollbar.

Here is what I have attempted so far.

<%@ 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

So basically whenever an onscroll event is called in div2 it calls the javascript function which is supposed to set div1 to the same offset.

Thanks!

Answer 1

don’t you need to use scrollTop?

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

i think there might be an issue if you set scrollTop to a value which is above its maximum.