scroll parallel two text boxes using jquery

Scenario

Some time we need to compare two text documents in parallel text-boxes. This article will explain how we scroll both text boxes at same time

Create a new project in visual studio and make a simple ActionController and its corresponding view

Razor View Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $textboxone = $('textone');
var $textboxtwo = $('texttwo');
$textboxone.scroll(function() {
$textboxtwo.scrollTop($textboxone.scrollTop());
});
});
</script>
<textarea rows="4" cols="50" id="textone">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</textarea>
<textarea rows="4" cols="50" id="texttwo">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</textarea>

Scroll left text box to see effect on right text box

For more jquery snippets please visit Jquery section