onscrollイベント

DOM イベント Event オブジェクト

定義と使用法

onscrollイベントは要素のスクロールバーがスクロールされたときに発生します。

ヒント：CSSを使用してください overflow スタイル属性が要素にスクロールバーを作成します。

インスタンス

例1

div要素をスクロール中にJavaScriptを実行します：

<div onscroll="myFunction()">

実際に試してみてください

例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 = "";
  }
}

実際に試してみてください

例3

ユーザーがページのトップから350ピクセル下にスクロールした場合に要素にslideUpクラスを追加してスライドインします：

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

実際に試してみてください

構文

HTMLで：

<element onscroll="myScript">

実際に試してみてください

JavaScriptで：

object.onscroll = function(){myScript};

実際に試してみてください

JavaScriptでaddEventListener()メソッドを使用する：

object.addEventListener("scroll", myScript);

実際に試してみてください

注釈：Internet Explorer 8 またはそれ以前のバージョンではサポートされていません addEventListener() メソッド。

技術的詳細

バブル： サポートされていません
キャンセル可能： サポートされていません
イベントタイプ： ユーザーインターフェースから生成された場合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 イベント

ブラウザのサポート

イベント Chrome IE Firefox Safari Opera
onscroll サポート サポート サポート サポート サポート
DOM イベント Event オブジェクト