scroll
イベントリスナーのscrollについて、サンプルコードを示しながら使い方を説明しています。
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() { const y = document.querySelector("#test-span"); y.textContent = x.scrollTop; } const x = document.querySelector("#test-scroll"); x.addEventListener("scroll", func1); </script>
赤字部分で、span要素(スクロール数を表示する部分)とdiv要素(スクロールする部分)をオブジェクトとしてx、yから参照しています。青字部分のx.scrollTopは、div要素内でのスクロール数です。これをspan要素のコンテンツに代入することで、スクロール数を表示しています。
これらは、緑色のイベントリスナーにより、スクロールが発生した時に呼び出されます。つまり、スクロールが発生する度にfunc1が呼び出され、スクロール数が再表示されます。
実行例は、以下のとおりです。
スクロール数0
1行目
2行目
3行目
4行目
5行目
2行目
3行目
4行目
5行目
要素内でスクロールすると、スクロール数が変化します。
ページ全体のスクロールをイベントにする
scrollは、ページ全体に対しても使えます。
【ページ全体のスクロールをイベントにする例】
<p>スクロール数<span id="test-span">0</span></p> <script> function func1() { const y = document.querySelector("#test-span"); y.textContent = document.documentElement.scrollTop; } window.addEventListener("scroll", func1); </script>
赤字部分は、ページ全体のスクロール数を取得し、その値でspan要素のコンテンツを書き換えています。青字でwindowオブジェクトを使うことで、ページ全体のスクロールをイベント対象にしています。
実行例は、以下のとおりです。
スクロール数0
ブラウザのサポート状況
各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。
項目 | 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版です。
「イベントリスナー一覧」に戻る