onscroll/JavaScript

イベントハンドラのonscrollについて説明します。

onscrollの使い方

 onscrollは、ページや要素内でスクロールした時に処理を実行出来ます。

 以下は、例です。

【onscroll利用例】
<script>
function func1() {
    var x = document.getElementById("test-span");
    var y = document.getElementById("test-div");
    x.innerHTML = y.scrollTop;
}
</script>

<p>スクロール数<span id="test-span">0</span></p>
<div onscroll="func1();" id="test-div" style="height:4em;overflow: scroll;">
1行目<br>
2行目<br>
3行目<br>
4行目<br>
5行目
</div>

 赤字部分で、test-span(スクロール数を表示する部分)とtest-div(スクロールする部分)をオブジェクトとしてx、yから参照しています。青字部分のy.scrollTopは、test-divのスクロール数です。これをtest-spanに代入する事で、スクロール数を表示しています。

 これらは、緑色のonscrollにより、スクロールが発生した時に呼び出されます。つまり、スクロールが発生する度にfunc1が呼び出され、スクロール数が再表示されます。

 実行例は、以下の通りです。

 スクロール数0

1行目
2行目
3行目
4行目
5行目

 要素内でスクロールすると、スクロール数が変化します。

bodyでの利用例

 onscrollは<body>でも使えます。

【bodyでの利用例】
<html>
<head>
<script>
function func2() {
    var x = document.getElementById("test-span2");
    x.innerHTML = document.body.scrollTop | document.documentElement.scrollTop;
}
</script>
</head>

<body onscroll="func2();">
・・・
<p>スクロール数<span id="test-span2">0</span></p>
</body>
</html>

 赤字部分は、ページ全体のスクロール数を取得し、その値でtest-span2(スクロール数を表示する部分)を書き換えています。ブラウザによって、document.bodyで取得出来るものとdocument.documentElementで取得出来るものがあるため、「|」で対応している方を自動的に取得するようにしています。

 青字部分のbodyに記載したonscrollにより、ページがスクロールする度にfunc2が呼び出され、スクロール数が書き換えられます。

 本ページでも上記スクリクトを記述しており、以下のようにページがスクロールされると値が変わります。

 スクロール数0

 尚、Internet Explorerでは上記が動作しません。Internet Explorerでも動作させるには、「スクロール」をご参照下さい。

サポート

・サポートするブラウザ

 以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

【サポートするブラウザ】
機種 ブラウザ サポート
パソコン Chrome
Safari
Firefox
Microsoft Edge
Internet Explorer
スマートフォン Chrome
Safari
Firefox

・サポートするタグ

 サポートするタグの一例は、以下の通りです。

 <div>

 <body>

 <form>

 <p>

 <pre>

 <ul>、<ol>、<li>

 <dl>、<dt>、<dd>

 その他ブロックボックスの多くがサポートしています。ブロックボックスについては、「ブロックボックスとインラインボックス」をご参照下さい。

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