2

如何在 Javascript 中同步两个垂直滚动条？

我有两个高度相同的 div，我希望能够用一个滚动条滚动它们。

这是我到目前为止所尝试的。

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

所以基本上每当在 div2 中调用 onscroll 事件时，它都会调用应该将 div1 设置为相同偏移量的 javascript 函数。

谢谢！

4

1 回答 1

2

你不需要使用scrollTop吗？

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

我认为如果您设置scrollTop的值高于其最大值，可能会出现问题。

于 2012-06-12T19:07:03.850 回答