スクロール/JavaScript

ブラウザ画面全体、ページの一部等をJavaScriptでスクロールさせる事が出来ます。又、現在の位置を取得する事も出来ます。

本項では、スクロール関連の処理について説明します。

画面をスクロールさせる

 画面全体をスクロールさせる方法には以下があります。

・window.scrollTo(x,y)
 ページ全体の左上から水平にx、垂直にyの場所に移動します。ピクセルで指定します。
・window.scrollBy(x,y)
 現在の表示位置から水平にx、垂直にy移動します。ピクセルで指定します。

 例えば、window.scrollTo(0,0);を実行すると、ページトップに移動します。scrollByでは負の値を指定すると、ページ上や左に移動します。

 ページが表示された時にスクロールさせたい場合、途中に記述すると最後までドキュメントが読み込まれていない状態のため、下にスクロール出来ない事があります。

headにスクロール処理を記述した場合

 このような場合、</body>のすぐ前にスクリプトを記述するとスクロール出来ます。又、<body>タグを書き換えて<body onload="window.scrollTo(0,100);">のように記述すると、ページが読み込まれた後に処理する事が出来ます。

要素のスクルール、高さ、幅

 要素に対するスクロールや高さ、幅関係のプロパティには以下があります。

・scrollTop
 要素の上から、下に何ピクセル移動しているかを取得出来ます。又、下に移動させる事も出来ます。
・scrollLeft
 要素の左から、右に何ピクセル移動しているかを取得出来ます。又、右に移動させる事も出来ます。
・scrollHeight
 要素の高さが何ピクセルかを取得出来ます。
・scrollWidth
 要素の幅が何ピクセルかを取得できます。

 例えばscrollTopプロパティであれば、 以下のように使います。

【scrollTop使い方】
<div id="dom-test" style="height:3em;overflow: auto;">
テスト1行目<br>
テスト2行目<br>
テスト3行目<br>
テスト4行目<br>
テスト5行目<br>
</div>

<script>
var x = document.getElementById("dom-test");
x.scrollTop = 20;
document.write(x.scrollTop);
</script>

 赤字部分で高さを指定し、文字がボックスからはみ出すとスクロールバーが表示されるようにしています。青字部分は、id:dom-testをオブジェクトとして変数xから参照出来るようにし、プロパティscrollTopで20px下にスクロールさせています。緑字部分は、現在の位置を表示します。青字部分で20px下にスクロールさせているため、20と表示されます。

 scrollLeftプロパティも使い方は同じで、青字部分のように指定する事も緑字部分のように読み込む事も出来ます。但し、標準では横幅に合わせて自動的に折り返すため、横にスクロール出来ない事があります。この場合、styleにwhite-space:nowrap;を追加すると、折り返さずスクロール出来るようになります。

 又、スクロールさせない場合、通常は以下のように1行目から表示されます。

テスト1行目
テスト2行目
テスト3行目
テスト4行目
テスト5行目

 上記は、テスト1行目、2行目〜5行目と記述していますが、途中までしか表示されず、スクロールしないと最後まで見えません。

 初期状態で最後の行を表示したい場合、JavaScriptで以下のように制御します。

【オブジェクトの表示位置を高さに合わせる】
<script>
var x = document.getElementById("dom-test");
x.scrollTop = x.scrollHeight;
</script>

 赤字部分は、要素のはみ出した部分も含めた高さとなるx.scrollHeightを、スクロール位置としてscrollTopに代入しています。つまり、高さ分スクロールさせているため、以下のように最下部までスクロールして表示されます。

テスト1行目
テスト2行目
テスト3行目
テスト4行目
テスト5行目

画面のスクルール位置

 画面のスクロール位置は、以下で取得出来ます。

・縦位置
 document.body.scrollTop、又はdocument.documentElement.scrollTop
・横位置
 document.body.scrollLeft 又はdocument.documentElement.scrollLeft

 scrollTopやscrollLeftは先に説明した通りで、要素の上や左からの位置を示します。それぞれ2種類あるのは、ブラウザによって取得方法が違うためです。以下は、縦方向のスクロール位置を表示する例です。

【スクロール位置を取得する】
<script>
window.addEventListener("scroll", test, false);
function test() {
    var x = document.getElementById("span-y");
    x.innerHTML = document.body.scrollTop | document.documentElement.scrollTop;
}
</script>

<p>スクロール位置は縦<span id="span-y">0</span>px</p>

</body>

 赤字部分は、スクロールする度に関数test()を呼び出すようにイベント登録しています。青字部分は、id:span-yをオブジェクトとして変数xから参照するようにしています。緑字部分は、そのオブジェクトの文字部分を示すプロパティに、スクロール位置を代入しています。「|」を使う事で、対応するブラウザを自動判別して位置を取得出来ます。

 このため、id:span-yはスクロールする度に書き換えられ、その位置を表示します。実行例は、以下の通りです。

スクロール位置は縦0px

 スクロールする度に値が変わる事が分かります。scrollLeftでも同様です。

 尚、WindowsXPでサポートしているInternet Explorer 8では、addEventListenerが動作しません。このため、attachEventを使います。

【Internet Explorer 8に対応させる】
<script>
if (window.addEventListener) {
    window.addEventListener("scroll", test, false);
} else if (window.attachEvent) {
    window.attachEvent("onscroll", test);
}
</script>

 上記により、FireFox等ではaddEventListener、Internet Explorer 8ではattachEventでイベント登録出来ます。

次のページイベント処理

  • このエントリーをはてなブックマークに追加

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)