최신 웹 개발 튜토리얼
 

onscroll 이벤트

<이벤트 객체

예

때 자바 스크립트를 실행하여 <div> 요소가 스크롤되고 :

<div onscroll="myFunction()">
»그것을 자신을 시도

정의 및 사용

요소의 스크롤이 스크롤 될 때 onscroll 이벤트가 발생합니다.

팁 : CSS를 사용하여 오버 플로우 요소의 스크롤을 만드는 스타일 속성을.

브라우저 지원

행사
onscroll 예 예 예 예 예

통사론

HTML에서 :

< »그것을 자신을 시도

자바 스크립트에서 :

object .onscroll=function(){ »그것을 자신을 시도

자바 스크립트는 사용 addEventListener() 메서드를 :

object .addEventListener("scroll", myScript );
»그것을 자신을 시도

참고 : addEventListener() 메서드는 인터넷 익스플로러 8 이전 버전에서는 지원되지 않습니다.

기술적 세부 사항

거품 : 아니
취소 가능 : 아니
이벤트 유형: UIEvent를
지원되는 HTML 태그 : <주소>, <BLOCKQUOTE> <body> <자막>, <중앙>, <DD> <DIR>, <div> <DL> <DT> <FIELDSET> <form> <h1> 에 <H6>, <HTML> <LI> <메뉴>, <object> <OL> <p>, <프리>, <>> <TBODY> <텍스트 영역을 선택 <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";
}
»그것을 자신을 시도
<이벤트 객체