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