HTML에서 요소의 스크롤바가 움직이는 순간 특정 스크립트를 실행하고 싶다면 onscroll 속성을 활용하면 됩니다. 요소가 스크롤될 때마다 onscroll 이벤트가 자동으로 발생하며, 이 이벤트에 연결된 함수가 호출됩니다.
onscroll 속성 사용 예제
아래 예제에서는 div 박스 내부를 스크롤하면 display() 함수가 실행되어 텍스트 색상이 파란색으로 변경됩니다. 코드를 직접 실행해 보면서 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
width : 250px;
height : 80px;
border : 2px solid blue;
overflow: scroll;
}
</style>
</head>
<body>
<p>박스를 스크롤해 보세요.</p>
<div id = "myid" onscroll = "display()">This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
<br><br></div>
<script>
function display() {
document.getElementById("myid").style.color = "blue";
}
</script>
</body>
</html>코드 설명
- CSS 스타일:
#myid선택자에 너비 250px, 높이 80px, 파란색 테두리, 그리고overflow: scroll;을 지정하여 스크롤 가능한 박스를 만듭니다. - onscroll 속성: div 요소에
onscroll="display()"를 추가하면, 사용자가 해당 요소를 스크롤하는 순간display()함수가 실행됩니다. - display() 함수:
document.getElementById("myid").style.color = "blue";코드를 통해 박스 안의 텍스트 색상을 파란색으로 변경합니다.
addEventListener를 사용한 대체 방법
HTML 속성 대신 JavaScript의 addEventListener() 메서드를 사용하면 마크업과 로직을 분리할 수 있어 코드 관리가 더욱 편리합니다.
document.getElementById("myid").addEventListener("scroll", function() {
this.style.color = "blue";
});이 방식은 HTML 구조를 수정하지 않고도 스크롤 이벤트를 처리할 수 있으며, 여러 개의 이벤트 핸들러를 등록해야 하는 경우에도 유용합니다. 실무에서는 유지보수성을 고려해 addEventListener() 방식을 권장합니다.