onscroll

イベントハンドラのonscrollについて、サンプルコードを示しながら使い方を説明しています。

onscrollの基本的な使い方

イベントハンドラのonscrollは、ページや要素内でスクロールした時に処理を実行できます。

以下は、利用例です。

【onscroll利用例】
<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() {
  const y = document.querySelector("#test-span");
  y.textContent = x.scrollTop;
}
const x = document.querySelector("#test-scroll");
x.onscroll = func1;
</script>

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

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

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

スクロール数0

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

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

ページ全体のスクロールをイベントにする

onscrollは、ページ全体に対しても使えます。

【ページ全体のスクロールをイベントにする例】
<p>スクロール数<span id="test-span">0</span></p>

<script>
function func1() {
  const y = document.querySelector("#test-span");
  y.textContent = document.documentElement.scrollTop;
}
window.onscroll = func1;
</script>

赤字部分は、ページ全体のスクロール数を取得し、その値でspan要素のコンテンツを書き換えています。青字でwindowオブジェクトを使うことで、ページ全体のスクロールをイベント対象にしています。

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

スクロール数0

HTMLの属性として記述する(非推奨)

onscrollは、HTMLの属性としても記述できます。

【onscrollをHTML属性で記述する例】
<script>
function func1() {
  const x = document.querySelector("#test-scroll");
  const y = document.querySelector("#test-span");
  y.textContent = x.scrollTop;
}
</script>

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

divタグで、onscroll属性によってfunc1を呼び出しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティで記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
scroll
【スマートフォン】
項目 Sa An Op Ch Fx Sm
scroll
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。