?
Solved

How can I sync div scroll position?

Posted on 2011-10-11
2
Medium Priority
?
987 Views
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" >
        <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.
0
Comment
Question by:RMAHelpDesk
2 Comments
 
LVL 36

Accepted Solution

by:
Miguel Oz earned 2000 total points
ID: 36953320
In Jquery, you can use scroll top:
http://api.jquery.com/scrollTop/
An example is here:
http://css-tricks.com/snippets/jquery/smooth-scrolling/
0
 

Author Comment

by:RMAHelpDesk
ID: 36956618
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

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Screencast - Getting to Know the Pipeline
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?
Suggested Courses

840 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