We help IT Professionals succeed at work.

Keep scrollbar position for 3 textboxes in sync.

amb1313 asked
Medium Priority
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

Watch Question


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??
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.
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.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.