Synchronize Scrolling of Two Multiline ASP.NET TextBoxes using jQuery

What is synchronize scrolling ?

For instance, there are two textareas on a webpage one is right side and second is left side, when a user scroll down of a textarea which is left side, than also scroll down of right side textarea automatically and vice versa that is called synchronize scrolling.

It can be easily achieved in asp.net using JQuery

How it works

The technique shown bellow synchronizes the scrolling of TextBox (TT_TextBox2) with TextBox (TT_TextBox1) and vice versa. As the user scrolls through the contents of  TT_TextBox1, TT_TextBox2 automatically scrolls to keep up with the display of  TT_TextBox1 and vice versa.

Following code describes, How synchronize scrolling in asp.net using JQuery

JQuery Code snippet.

<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!-- call jquery file or library into asp.net page --->
    <script>
        $(document).ready(function() { // this is a function which is called by browser when it loads a webpage
 
            var $txtbox1 = $('[id$="TT_TextBox1"]'); // get textBox 1 by an id, assign to variable
            var $txtbox2 = $('[id$="TT_TextBox2"]'); // get textBox2 by an id, assign to variable
            $txtbox1.scroll(function () { // trigger scroll() event when user scrolls textbox 1
                $txtbox2.scrollTop($txtbox1.scrollTop()); // call scrollTop() function by textBox2, pass another scrollTop() function for textBox1
            });
 
            $txtbox2.scroll(function () {  // trigger scroll() event when user scrolls textbox 2
                $txtbox1.scrollTop($txtbox2.scrollTop()); // call scrollTop() function by textBox1, pass another scrollTop() function for textBox2
            });
        });
 
    </script>

ASP.NET Code snippet.

<!--- Following code renders 2 textareas and a label control on browser --->
 
<asp:Label runat="server" Text="Click and scroll in the left textbox to see the synchronized scroll in right textbox and vice versa"></asp:Label>
        <br/> <br/>
        <asp:TextBox ID="TT_TextBox1" runat="server" Rows="5" TextMode="MultiLine"
            Text="TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com" />
 
        <asp:TextBox ID="TT_TextBox2" runat="server" Rows="5" TextMode="MultiLine"
            Text="TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com
                  TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com TutorialsTown.Com" />