S-JIS[2007-03-21] Use JavaScript 変更履歴

スクロール

JavaScriptでボックス(スクロールできるタグ)をスクロールさせる方法について。


スクロールできるタグ

iframeタグ・bodyタグ・範囲指定したdivタグ等は、(枠内に入りきらない場合はスクロールバーが出て)スクロールできる。

JavaScriptでこれらのタグのオブジェクトを取得した場合、その属性(?)として以下のようなプロパティーが使える。

プロパティー 概要
scrollWidth
scrollHeight
仮想的な(表示範囲に収まらない)全体サイズ
scrollLeft
scrollTop
現在表示している位置
offsetWidth
offsetHeight
表示する範囲(大きさ)っぽい
offsetLeft
offsetTop
フレームの中でボックスが表示されている位置だと思う

divタグのスクロール例

divタグにスタイルを適用してやることで、スクロールできるようになる。
(参考:sakiさんのスクロールバー付きのボックスを設定する

HTML(ヘッダー部):

<head>
<title>スクロールのテスト</title>
<style type="text/css">
.scr {
/*overflow: scroll; /* スクロール */ 
  overflow: hidden; /* はみ出さずに範囲内だけ表示 */ 
  width: 100px;
  height: 50px;
  background-color: blue;
</style>
</head>

overflowscrollを指定するとスクロールバーが表示される。スクロールバーをユーザーが操作すれば、スクロールさせることが出来る。
一方、hiddenを指定するとスクロールバーが表示されず、ユーザーがスクロールさせることは出来なくなる。ただしこの場合でも、JavaScriptからスクロールさせることは出来る。

HTML(ボディー部):

<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>

※上限・下限を超えた値を設定しても、自動的に範囲内に収めてくれる。

実例:

もじれつ1
もじれつ2
もじれつ3
もじれつ4
もじれつ5
もじれつ6

JavaScriptへ戻る / 技術メモへ戻る
メールの送信先:ひしだま