목차
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 속성 사용 가능 태그 종류
요소에 스크롤바 생성하려면, CSS overflow 속성 사용.
모든 브라우저 지원.
onscroll 구문
HTML 방식
<element onscroll="myScript ">
JS 방식 (3가지)
object. onscroll = ()=> {myScript };object .onscroll = function(){myScript };object .addEventListener("scroll", myScript
[속성값]
myScript
마우스 스크롤 시, 실행할 JS 코드
주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출. 사용 방식 통일 권장.
