S-JIS[2007-03-21] Use JavaScript 変更履歴
JavaScriptでボックス(スクロールできるタグ)をスクロールさせる方法について。
iframeタグ・bodyタグ・範囲指定したdivタグ等は、(枠内に入りきらない場合はスクロールバーが出て)スクロールできる。
JavaScriptでこれらのタグのオブジェクトを取得した場合、その属性(?)として以下のようなプロパティーが使える。
プロパティー | 概要 |
---|---|
scrollWidth scrollHeight |
仮想的な(表示範囲に収まらない)全体サイズ |
scrollLeft scrollTop |
現在表示している位置 |
offsetWidth offsetHeight |
表示する範囲(大きさ)っぽい |
offsetLeft offsetTop |
フレームの中でボックスが表示されている位置だと思う |
divタグにスタイルを適用してやることで、スクロールできるようになる。
(参考:sakiさんのスクロールバー付きのボックスを設定する)
<head> <title>スクロールのテスト</title> <style type="text/css"> .scr { /*overflow: scroll; /* スクロール */ overflow: hidden; /* はみ出さずに範囲内だけ表示 */ width: 100px; height: 50px; background-color: blue; </style> </head>
overflowにscrollを指定するとスクロールバーが表示される。スクロールバーをユーザーが操作すれば、スクロールさせることが出来る。
一方、hiddenを指定するとスクロールバーが表示されず、ユーザーがスクロールさせることは出来なくなる。ただしこの場合でも、JavaScriptからスクロールさせることは出来る。
<body> <div class="scr" id="scroll_div"> もじれつ1<br> もじれつ2<br> もじれつ3<br> もじれつ4<br> もじれつ5<br> もじれつ6<br> </div> <input type="button" value="up" onclick="scroll_div.scrollTop -= scroll_div.offsetHeight / 2"> <input type="button" value="down" onclick="scroll_div.scrollTop += scroll_div.offsetHeight / 2"> </body>
※上限・下限を超えた値を設定しても、自動的に範囲内に収めてくれる。