온스크롤 이벤트
예시
<div> 요소가 스크롤될 때 JavaScript를 실행합니다.
<div onscroll="myFunction()">
정의 및 사용
onscroll 이벤트는 요소의 스크롤 막대가 스크롤될 때 발생합니다.
팁: CSS 오버플 로 스타일 속성을 사용하여 요소에 대한 스크롤 막대를 만듭니다.
브라우저 지원
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
통사론
HTML:
<element onscroll="myScript">
자바스크립트:
object.onscroll = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
object.addEventListener("scroll", myScript);
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
거품: | 아니 |
---|---|
취소 가능: | 아니 |
이벤트 유형: | 사용자 인터페이스에서 생성된 경우 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>, <머리>, <울> |
DOM 버전: | 레벨 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 = "";
}
}
예시
사용자가 페이지 상단에서 350픽셀 아래로 스크롤한 경우 요소를 밀어넣습니다(slideUp 클래스 추가).
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}