목차
- onscroll 예제 - 마우스 스크롤 시 실행
- onscroll 정의
- onscroll 구문
onscroll 예제 - 마우스 스크롤 시 실행
<style>
#hz {
border: 1px solid gray;
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
<div id="hz" onscroll="homzzang()">
홈짱닷컴 Homzzang.com<br><br>
홈페이지 제작관리 강의<br>
그누보드 영카트 커스텀<br>
서버세팅 서버관리 강의
</div>
<script>
function homzzang() {
document.getElementById("hz").style.color = "red";
}
</script>
결과보기
onscroll 정의
마우스 스크롤 시 실행.
1. onscroll 속성 사용 가능 태그 종류
모든 보이는 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>)
2.
요소에 스크롤바 생성하려면, CSS overflow 속성 사용.
3.
모든 브라우저 지원.
onscroll 구문
HTML 방식
- <element onscroll="myScript">
JS 방식 (3가지)
- object.onscroll = ()=>{myScript};
- object.onscroll = function(){myScript};
- object.addEventListener("scroll", myScript);
[속성값]
myScript
마우스 스크롤 시, 실행할 JS 코드
- 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
- 사용 방식 통일 권장.
