scroll ( onscroll )イベント

　scroll ( onscroll )イベントは、設定されたタグエレメントのスクロールバーを操作したら発生するイベントです。 scrollはイベントタイプ名で、onscrollはイベントハンドラーです。

windowへのscrollイベント

window.addEventListener( 'scroll', function(){
	console.log("横のスクロール量 ： " + scrollX);
	console.log("縦のスクロール量 ： " + scrollY);
},false);

詳しくは Example を参照してください

　上記の例では、ウィンドウを対象に onscroll イベントハンドラーを設定しています。横縦のそれぞれのスクロール量を取得しています。scrollX、scrollY は Window のプロパティです。

　イベントタイプは addEventListener() メソッドで使われるイベントを示す名称です。このメソッドによってイベントハンドラーが設定されます。
　イベントハンドラーはそのイベントを捉えることを設定するオブジェクトの属性です。

　スクロールバーのないエレメントでも、CSSのoverflowプロパティでスクロールバーを設定することができます。

構文（Syntax）

<tagelement onscroll="function()">

object.onscroll = function(){ };

object.addEventListener("scroll", script_);


Bubbles	No
Cancelable	No
Interface	UiEvent（ユーザーインターフェイスから生成された場合）,Event
Supported HTML Elements	<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>

　scrollイベントの例です。以下に表示されるスクロールバーを操作してくみてください。スクロールに関する幅、高さ、位置が表示されます。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

HTML内容

CSS内容

Script内容