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) {
    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。그렇지 않으면 이벤트。
지원되는 HTML 태그: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
DOM 버전: 레벨 2 이벤트

브라우저 지원

이벤트 크롬 IE 파이어폭스 사파리 오페라
onscroll 지원 지원 지원 지원 지원
DOM 이벤트 Event 객체