在 JavaScript 中同步两个滚动条

syncing two scrollbars in javascript

本文关键字：两个 滚动条 JavaScript 同步      更新时间：2023-09-26

如何在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 事件时，它都会调用 javascript 函数，该函数应该将div1 设置为相同的偏移量。

谢谢！

你不需要使用scrollTop吗？

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

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

相关文章：