jQuery div 要素の横スクロールを同期させる

jQuery を利用して div 要素の横スクロールを同期することができます。

<style type="text/css">
    .container {
        width: 120px;
        background-color: #CCC;
        overflow: auto;
        height: 100px;
        white-space: nowrap;
    }
    .contents {
        width: 50px;
        height: 60px;
        display: inline-block;
    }
    #one, #five {
        background-color:ActiveCaption;
    }
    #two, #six {
        background-color:Teal;
    }
    #three, #seven {
        background-color:Silver;
    }
    #four, #eight {
        background-color:Orange;
    }
</style>

<div id="container1" class="container">
        <div class="contents" id="one"></div>
        <div class="contents" id="two"></div>
        <div class="contents" id="three"></div>
        <div class="contents" id="four"></div>
    </div>
    <div id="container2" class="container">
        <div class="contents" id="five"></div>
        <div class="contents" id="six"></div>
        <div class="contents" id="seven"></div>
        <div class="contents" id="eight"></div>
    </div>

var $containers = $('#container1, #container2');
    var horizontalSync = function (e) {
        var $pair = $containers.not(this).off('scroll'), pair = $pair.get(0);
        pair.scrollLeft = this.scrollLeft;
        // Firefox の場合、少しタイミングをずらします。
        setTimeout(function () { $pair.on('scroll', horizontalSync); }, 10);
    }
    $containers.on('scroll', horizontalSync);

Synchronized scrolling using jQuery?
http://stackoverflow.com/questions/18952623/synchronized-scrolling-using-jquery