在javascript中同步两个滚动条

Question

如何在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 

所以基本上每当onscroll事件被称为在DIV2它调用应该设置DIV1以相同的偏移JavaScript函数。

谢谢！

Answer 1

你不需要使用scrollTop？

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

我觉得如果你设置scrollTop到一个值，该值高于其最大的有可能是一个问题。