ScrollSync

Synchronize scroll between multiple containers with varying size

Download: jquery.scrollSync.js right-click on link and save

Example

    <head>
        <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script src="jquery.scrollSync.js" type="text/javascript"></script>
    </head>
    <body>
                <div class="scrollable" style="width: 100px; height: 300px; float: left; overflow: auto;">
                    1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20
                </div>
                <div class="scrollable" style="width: 100px; height: 200px; float: left; overflow: auto;">
                    1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20
                </div>
                <div class="scrollable" style="width: 100px; height: 100px; float: left; overflow: auto;">
                    1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20
                </div>
        <!-- Need to be called after the elements affected-->
        <script type="text/javascript">
            $(".scrollable").scrollSync();
        </script>
    </body>
    

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20