onscrollイベント
例
<div>要素がスクロールされているときにJavaScriptを実行します。
<div onscroll="myFunction()">
定義と使用法
onscrollイベントは、要素のスクロールバーがスクロールされているときに発生します。
ヒント： CSSオーバーフロースタイルプロパティを使用して、要素のスクロールバーを作成します。
ブラウザのサポート
| Event | |||||
|---|---|---|---|---|---|
| onscroll | Yes | Yes | Yes | Yes | Yes |
構文
HTMLの場合：
<element onscroll="myScript">
JavaScriptの場合：
object.onscroll = function(){myScript};
JavaScriptでは、addEventListener（）メソッドを使用します。
object.addEventListener("scroll", myScript);
注： addEventListener （）メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
| 泡： | 番号 |
|---|---|
| キャンセル可能： | 番号 |
| イベントタイプ： | ユーザーインターフェイスから生成された場合はUiEvent 、それ以外の場合はEvent |
| サポートされているHTMLタグ： | <address>、<blockquote>、<body>、<caption>、<center>、<dd>、<dir>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1 >から<h6>、<html>、<li>、<menu>、<object>、<ol>、<p>、<pre>、<select>、<tbody>、<textarea>、<tfoot>、 <thead>、<ul> |
| DOMバージョン： | レベル2のイベント |
その他の例
例
異なるスクロール位置でクラス名を切り替える-ユーザーがページの上部から50ピクセル下にスクロールすると、クラス名「test」が要素に追加されます（さらに上にスクロールすると削除されます）。
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
例
ユーザーがページの上部から350ピクセル下にスクロールしたら、要素をスライドさせます（slideUpクラスを追加します）。
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}