Keep scrollbar position for 3 textboxes in sync.

Posted on 2009-02-10
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

Question by:amb1313
  • 2

Author Comment

ID: 23604806
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

ID: 23607492
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

amb1313 earned 0 total points
ID: 23608393
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

862 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