scrollの使い方
scrollは、ページや要素内でスクロールした時に処理を実行出来ます。
以下は、例です。
【scroll利用例】
<p>スクロール数<span id="test-span">0</span></p>
<div id="test-scroll" style="height:4em;overflow: scroll;">
1行目<br>
2行目<br>
3行目<br>
4行目<br>
5行目
</div>
<script>
function func1() {
var y = document.getElementById("test-span");
y.innerHTML = x.scrollTop;
}
var x = document.getElementById("test-scroll");
x.addEventListener("scroll", func1, false);
</script>
赤字部分で、test-span(スクロール数を表示する部分)とtest-scroll(スクロールする部分)をオブジェクトとしてx、yから参照しています。青字部分のx.scrollTopは、test-scrollのスクロール数です。これをtest-spanに代入する事で、スクロール数を表示しています。
これらは、緑色のイベントリスナーにより、スクロールが発生した時に呼び出されます。つまり、スクロールが発生する度にfunc1が呼び出され、スクロール数が再表示されます。
実行例は、以下の通りです。
スクロール数0
1行目
2行目
3行目
4行目
5行目
要素内でスクロールすると、スクロール数が変化します。
ページのスクロールをイベントにする
scrollは、ページ全体に対しても使えます。
【bodyでの利用例】
<p>スクロール数<span id="test-span2">0</span></p>
<script>
function func2() {
var y = document.getElementById("test-span2");
y.innerHTML = document.body.scrollTop | document.documentElement.scrollTop;
}
window.addEventListener("scroll", func2, false);
</script>
赤字部分は、ページ全体のスクロール数を取得し、その値でtest-span2を書き換えています。ブラウザによってdocument.bodyで取得出来るものとdocument.documentElementで取得出来るものがあるため、「|」で対応している方を自動的に取得するようにしています。
青字でwindowオブジェクトを使う事で、ページ全体のスクロールを対象にしています。
実行例は、以下の通りです。
サポート
・サポートするブラウザ
以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。
【サポートするブラウザ】
機種 |
ブラウザ |
サポート |
パソコン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
Microsoft Edge |
〇 |
Internet Explorer |
v9以上 |
スマートフォン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
・サポートするタグ
サポートするタグの一例は、以下の通りです。
<div>
<form>
<p>
<pre>
<ul>、<ol>、<li>
<dl>、<dt>、<dd>
その他ブロックボックスの多くがサポートしています。ブロックボックスについては、「ブロックボックスとインラインボックス」をご参照下さい。