asked on

How can I sync div scroll position?

So I needed a vertical scroll bar separate from the container it scrolls. I have my scroll bar and container setup the way I believe they need to be, but I don't know how to wire them up so that when I move the scrollbar in one div the content in the other div moves. Here is what I've got.

<div id="scrollbox" style="height: 450px; overflow: hidden;">
    <asp:GridView ID="gvData" runat="server" >
        <Columns>
             ...
             ...
             ...
        </Columns>
    </asp:GridView>
</div>

<div id="scrollbar" style="height: 450px; width: 20px; overflow: auto; overflow-x: hidden;">
    <asp:GridView ID="gvScroll" runat="server">
        <Columns>
             <asp:BoundField DataField="DataID" /> 
        </Columns>
    </asp:GridView>
</div>

Open in new window

gvData and gvScroll are both bound to the same data, but gvScroll only has 1 field and the width of the scrollbar div hides it so that only the scroll bar shows.

I imagine jquery/javascript is the way to go for smooth scrolling. Any help getting the scrollbar div to control the position of the scrollbox div would be greatly appreciated.

ASKER CERTIFIED SOLUTION

Miguel Oz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

RMAHelpDesk

ASKER

Thanks for pointing me in the right direction.
This is what I came up with...

    <script type="text/javascript">
        $(document).ready(function () {
            $('#scrollbar').scroll(function () {
                var scrollY = $('#scrollbar').scrollTop();
                $('#scrollbox').scrollTop(scrollY);
            });
        });
    </script>

Open in new window