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>
※上限・下限を超えた値を設定しても、自動的に範囲内に収めてくれる。