2

Javascriptで2つの垂直スクロールバーを同期するにはどうすればよいですか?

同じ高さの 2 つの div があり、1 つのスクロールバーで両方をスクロールできるようにしたいと考えています。

これが私がこれまでに試みたことです。

<%@ 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 に答える