목차
scroll 예제 - 스크롤 횟수 scroll 정의 scroll 구문 scroll 예제 - 스크롤 스타일 변경
scroll 예제 - 스크롤 횟수
<style>
#hz {
border: 1px solid silver;
width: 300px;
height: 100px;
overflow: scroll;
}
#hz p {width:750px ; height:300px;}
</style>
<div id="hz" onscroll="homzzang ()"><p>홈짱닷컴 Homzzang.com<p></div>
<p>Scroll 횟수 : <span id="demo">0</span></p>
<script>
var x = 0;
function homzzang () {
document.getElementById("demo").innerHTML = x += 1 ;
}
</script>
결과보기
scroll 정의
요소 (가로・세로) 스크롤막대가 스크롤될 때 이벤트 발생
1.
CSS overflow 속성 이용해 스크롤막대 생성.
2.
주요 최신 브라우저 모두 지원.
3.
이벤트확산 : X
취소가능성 : X
이벤트타입 : 사용자 인터페이스에서 생성되면 UiEvent , 그렇지 않으면 Event .
지원 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>
DOM 버전 : Level 2 Events
scroll 구문
[HTML 속성 이용 방식]
< element onscroll=" homzzang() ">
[JS 속성 이용 방식]
object .onscroll = function(){ homzzang() };
[JS 메서드 이용 방식]
object .addEventListener("scroll", homzzang
PS.
※ homzzang : 실행함수명.
※ addEventLister() 방식 주의사항 2가지
ⓘ 이벤트명에 on 안 붙임.
② 실행함수명 뒤에 소괄호 안 붙임.
※ addEventListener() 메서드는 IE8 이하 브라우저는 지원 X.
scroll 예제 - 스크롤 스타일 변경
[방법1] - 클래스 추가/제거
<style>
body {height: 1000px;}
#hz {position: fixed}
.hz_style {font-size:30px; background-color: yellow;}
</style>
<body>
<p id="hz">홈짱닷컴 Homzzang.com</p>
<script>
window.onscroll = function() {homzzang()};
function homzzang() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("hz").className = "hz_style";
} else {
document.getElementById("hz").className = "";
}
}
</script>
</body>
결과보기
[방법2] - 스타일 속성 개별 변경
<style>
body {overflow: scroll; height: 1000px; position:relative}
.hz {position:absolute; top:300px; border:1px solid black; margin: 0 auto; width: 0px;height: 0px; display:none;}
</style>
<body onload="scrollDetect()">
<div class="hz">홈짱닷컴 Homzzang.com</div>
<script>
function scrollDetect() {
let div = document.querySelector('.hz')
var lastScroll = 0;
window.onscroll = function () {
let currentScroll = document.documentElement.scrollTop; // Get Current Scroll Value
if (currentScroll > 0 && lastScroll <= currentScroll) {
lastScroll = currentScroll;
div.style.width = '80%'
div.style.height = "100px";
div.style.background = "red";
div.style.position = "absolute";
div.style.top = "300";
div.style.left = "0";
div.style.display = "block";
} else {
lastScroll = currentScroll;
div.style.display = "none";
}
};
}
</script>
</body>
결과보기
