writing/jquery.scrollSync.js at 0fc2d657f7308bc248a00d4a8bcb883cee398ff0 · josephernest/writing · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*
 * jquery.scrollSync
 * Synchronize scroll between multiple containers with varying size
 * Date: 20151201
 *
 * Thomas Frost
 * http://xtf.dk/
 *
 * Required:
 * jQuery
 *  http://jquery.com/
 *
 * Usage:
 * $('.scrollable').scrollSync();
 */
(function ($) {
    $.fn.scrollSync = function () {
        var $this = $(this);
        $this.on('scroll', function (e) {
            var $sender = $(e.currentTarget);
            if ($sender.is(":hover")) {
                var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
                $this.not($sender).each(function (i, other) {
                    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
                });
            }
        });
    };
})(jQuery);