How can I sync div scroll position?

Posted on 2011-10-11
Last Modified: 2012-05-12
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" >

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

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.
Question by:RMAHelpDesk
    LVL 35

    Accepted Solution

    In Jquery, you can use scroll top:
    An example is here:

    Author Comment

    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();

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
    Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
    Hi everyone! This is Experts Exchange customer support.  This quick video will show you how to change your primary email address.  If you have any questions, then please Write a Comment below!
    Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now