定義と使用法
要素のスクロールバーがスクロールされているときonscrollイベントが発生します。
ヒント：CSSの使用オーバーフロー要素のスクロールバーを作成するために、スタイルプロパティを。
ブラウザのサポート
| イベント | |||||
|---|---|---|---|---|---|
| onscroll | はい | はい | はい | はい | はい |
構文
HTMLには：
JavaScriptで：
object .onscroll=function(){ »それを自分で試してみてください JavaScriptでは、使用してaddEventListener()メソッドを：
object .addEventListener("scroll", myScript );
»それを自分で試してみてください 注： addEventListener()メソッドは、Internet Explorer 8およびそれ以前のバージョンでサポートされていません。
技術的な詳細
| バブル： | ノー |
|---|---|
| 取消し可能： | ノー |
| イベントの種類： | たUIEvent |
| サポートされているHTMLタグ： | <アドレス>、<BLOCKQUOTE>、<BODY>、<キャプション>、<中心>、<DD>、<DIR>、<DIV>、<DL> <DT>、<フィールドセット>、<FORM>、 <h1> 、<H6>、<HTML>、<LI>、<メニュー>、<オブジェクト>、<OL>、<P>、<PRE>、<選択>、<TBODY>、<TEXTAREA>、<TFOOT>に<THEAD>、 <ul> |
| DOMバージョン： | レベル2のイベント |
その他の例
例
異なるスクロール位置にクラス名を切り替える-場合ダウン50個のピクセルページの先頭からユーザがスクロール、クラス名"test"エレメントに追加され(and removed when scrolled up again) 。
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個のピクセルをスクロールダウンしたときに素子にスライド(add the slideUp class) 。
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop >
350) {
document.getElementById("myImg").className = "slideUp";
}
»それを自分で試してみてください <イベントオブジェクト