gacky's report
mindiagacky's report見出し語

スクロールの連動

gacky · 2012-04-19 更新

2つのスクロールを連動できる

<div class="div1">
piyopiyo<br />
fugafuga<br />
piyopiyo<br />
fugafuga<br />
piyopiyo<br />
fugafuga<br />
piyopiyo<br />
fugafuga<br />
</div>
<div class="div2">
piyopiyo<br />
fugafuga<br />
piyopiyo<br />
fugafuga<br />
piyopiyo<br />
fugafuga<br />
piyopiyo<br />
fugafuga<br />
</div>
.div, .div2 {
background:#fff;
border:solid 1px #000;
width:100px;
max-height:100px;
overflow-y:scroll;
overflow-x:scroll;
}  
$(".div").scroll( function() {
  $('.div2').scrollLeft( $('.div').scrollLeft() );
  $('.div2').scrollTop( $('.div').scrollTop() );
});
$(".div2").scroll( function() {
  $('.div').scrollLeft( $('.div2').scrollLeft() );
  $('.div').scrollTop( $('.div2').scrollTop() );
});

関連する見出し語