화면 스크롤 이벤트를 처리하는 간단한 HTML과 JavaScript 코드를 제공합니다. 이 코드는 사용자가 화면을 스크롤할 때 발생하는 이벤트를 감지하고 이벤트를 처리합니다.
<!DOCTYPE html>
<html>
<head>
<title>화면 스크롤 이벤트</title>
<style>
/* 스크롤 이벤트 표시 영역 스타일 */
#scroll-info {
position: fixed;
top: 0;
left: 0;
background-color: #333;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h1>화면 스크롤 이벤트</h1>
<!-- 스크롤 이벤트 표시 영역 -->
<div id="scroll-info">스크롤 위치: 0px</div>
<!-- 여기에 페이지 내용 추가 -->
<script>
// 스크롤 이벤트 핸들러
window.addEventListener("scroll", function() {
var scrollInfo = document.getElementById("scroll-info");
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
scrollInfo.textContent = "스크롤 위치: " + scrollTop + "px";
});
</script>
</body>
</html>
위 코드에서는 스크롤 이벤트를 감지하고 스크롤 위치를 표시하는 스크롤 이벤트 핸들러를 사용합니다.
결과 보기
'HTML 예제' 카테고리의 다른 글
| 사용자 정보 입력 받기 (0) | 2023.12.07 |
|---|---|
| 텍스트 스타일링 연습 (0) | 2023.12.07 |
| 간단한 메뉴 디자인 (0) | 2023.12.07 |
| 사진 크기 조절하기 (0) | 2023.12.07 |
| CSS 애니메이션 사용 (0) | 2023.12.07 |
