.onscroll

https://developer.mozilla.org/en-US/docs/Web/API/Window.onscroll

windowがスクロールした際に呼び出される関数を指定します。

文法

window.onscroll = funcRef;

funcRefには、関数または関数への参照を割り当てます。

例

例1: 一般的な使用例

window.onscroll = function (event) {
  // windowがスクロールされた際に呼び出される処理
}

例2: スクロールを検知

下記の例は、ページがスクロールされる度にアラートダイアログを表示します。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>onscroll test</title>
<script type="text/javascript">
window.onscroll = scroll;
function scroll () {
 alert("スクロールを検知! " + window.pageXOffset + " " + window.pageYOffset);
 //注意: window.innerWidthとwindow.innerHeightを使用して、
 //      表示領域の幅と高さにアクセスすることが可能です。
}
</script>
</head>
<body>
  <p>windowのサイズを縮め、</p>
  <p>スクロールバーを使用して、</p>
  <p>ページコンテンツを</p>
  <p>window内で</p>
  <p>スクロールしてみてください。</p>
</body>
</html>

例3:

下記は、垂直スクロールが500ピクセルを超えると、ページのトップへのリンクを表示する例です。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example</title>
<script type="text/javascript">
var appended = false, bookmark = document.createElement("div");
bookmark.id = "arrowUp";
bookmark.innerHTML = "<a href=\"#" title=\"Top of the page.\">&uarr;<\/a>";
onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 500) {
    if (!appended) {
      document.body.appendChild(bookmark);
      appended = true;
    }
  } else {
    if (appended) {
      document.body.removeChild(bookmark);
      appended = false;
    }
  }
};
</script>
<style type="text/css">
#arrowUp {
  position: fixed;
  height: auto;
  width: auto;
  right: 10px;
  top: 10px;
  font-size: 48px;
}
#arrowUp a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-family: serif;
}
</style>
</head>
<body>
<p>ここは、ページコンテンツ領域です!</p>
</body>
</html>

注意事項

window.scrollX、scrollYが0では無い場合、 (これはスクリプトまたは手動で、何かしらのスクロールが発生している事を意味します) そのページの再読み込みは、即座にonscrollイベントをトリガします。

仕様

HTML5: Event handlers on elements, Document objects, and Window objects

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。