■ はじめに
スクロール連動について、調べたところ、 jQuery で簡単にできるっぽいのでメモ。
■ サンプル
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8" /> <title>Demo</title> </head> <body> <div id="upper" style="width:100px; height:100px; overflow:auto; border-style:solid"> <div>123456789012345678901234567890123456789012345678901234567890</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </div> <div id="lower" style="width:100px; height:100px; overflow:auto; border-style:solid"> <div>123456789012345678901234567890123456789012345678901234567890</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </div> <script type="text/javascript" src="">http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> <script> var upperDiv = $('#upper'); var lowerDiv = $('#lower'); upperDiv.scroll(function() { console.log("Enter upperDiv"); lowerDiv.scrollTop(upperDiv.scrollTop()); lowerDiv.scrollLeft(upperDiv.scrollLeft()); }); lowerDiv.scroll(function() { console.log("Enter lowerDiv"); upperDiv.scrollTop(lowerDiv.scrollTop()); upperDiv.scrollLeft(lowerDiv.scrollLeft()); }); </script> </body> </html>
