Scroll Sync

by Marko Keuschnig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div id="top-left" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            Pain Scala
        </div>
        <div id="top-right" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pre-scrollable">
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
        </div>
    </div>
    <div class="row">
        <div id="bottom-left" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pre-scrollable">
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this div</p>
            <p>Too Large for this div, too large for this div, too large for this...

CSS

#top-right {
    border: 1px solid;
    overflow: hidden;
    height: 200px;
    white-space:nowrap;
}

#top-left {
    border: 1px solid;
    overflow: hidden;
    height: 200px;
    white-space:nowrap;
}

#bottom-right {
    border: 1px solid;
    overflow: scroll;
    height: 200px;
    white-space:nowrap;
}

#bottom-left {
    border: 1px solid;
    overflow: hidden;
    height: 200px;
    white-space:nowrap;
}

JavaScript

$(document).ready(function() {
    $("#bottom-right").scroll(function () { 
    	$("#bottom-left").scrollTop($("#bottom-right").scrollTop());
    	$("#top-right").scrollLeft($("#bottom-right").scrollLeft());
    });
});