Keep scrollbar position for 3 textboxes in sync.

Posted on 2009-02-10
Last Modified: 2012-05-06
I have 3 textboxes that I need to keep the scrollbar positions in sync so all 3 scroll in unison.

In IE, it works only if you are moving the scrollbar around for just one of the Textboxes.  In this case, it moves the other 2 just fine.   However, if I alternate the textbox that I am moving the scrollbars for, on that first inital switch to a different textbox, it resets all scrollbars to the very top position.  So for instance, If I move the scrollbar in Textbox1 and then move the scrollbar in either Textbox2 or Textbox3, it resets alll of them to be at the very top.

To better illustrate this because I know it's a little confusing to read, I found a website where someone has an example of 2 scrollbars kept in sync.  You can see the "bug" or behavior that I am referring to.   Simply alternate which textbox's scrollbar you are clicking on, and you will see that it will jump up to the top.   This is the same thing I am running into.

My first initial thought was that this is because IE keeps calling the event because once I move the scrollbar for another textbox, that "onscroll" event will now fire off as well.   However, even if that was the case, I don't see why it would be resetting them.   This appears to be working ok for me in Firefox but for whatever reason, I'm having this issue with IE.


function setScrollPosition(control)


var top = control.scrollTop;

document.getElementById('<%= Textbox1.ClientID %>').scrollTop = top;

document.getElementById('<%= Textbox2.ClientID %>').scrollTop = top;

document.getElementById('<%= Textbox3.ClientID %>').scrollTop = top;




Code Behind

<asp:TextBox ID="Textbox1" runat="server" TextMode="MultiLine" onscroll="setScrollPosition(this);"></asp:TextBox>

<asp:TextBox ID="Textbox2" runat="server" TextMode="MultiLine" onscroll="setScrollPosition(this);"></asp:TextBox>

<asp:TextBox ID="Textbox3" runat="server" TextMode="MultiLine" onscroll="setScrollPosition(this);"></asp:TextBox>

Open in new window

Question by:amb1313

    Author Comment

    Just to add to this some more.   This appears to be something that affects any textbox with a scrollbar...Not just what I am trying to do with Javascript as mentioned in the initial post.

    I created a textbox with the Textmode set to Multiline.   I then put a bunch of information in that textbox and moved the scrollbar.   If I then put focus on something else on the page (click off the textbox), and then click back on the scrollbar (without clicking inside the textbox), it forces the scrollbar to the very top.

    Any ideas??
    LVL 12

    Expert Comment

    I have just made a sample out of this and realised two things.
    1. I don't see the scroll position to be forced to the top unless it is clicked on the scroll bar.  This is because when you do that, the focus will automatically forced to that text area and by default WILL be forced to the top of the page.  Work around is to click INSIDE the the textbox.  I have written a function to force the scroll to where it is current located, but, this has not helped, because, the onfocus default behaviour fires before this.  There should have been some function like onbeforefocus (which is not there)

    2. The value inside the text area should be equal and the number of rows should also be equal, for an expected behaviour.

    Accepted Solution

    I've tried out various ideas and it just looks like there is not a way to do this.  I am closing this question as it appears to be the behavior that IE has for this situation.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    728 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

    18 Experts available now in Live!

    Get 1:1 Help Now