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" />