3. 스크롤에 의한 event
scroll
scrollTop : 스크롤을 내린 정도.
*var doc=document; 를 통해 document를 변수 doc에 넣어놨다.*
<HTML>
<CSS>
<스크롤이 많이 생긴 화면>
1) window에 scroll event가 생길 경우의 실행.
2)
- body를 기준으로 얼마만큼 내려갔느냐가 판단되어야 한다.
- scrollTop : 현재 내려온 정도.
- 보통 스크롤 한번에 100px 내려온다. 따로 설정할 수 있다.
↓ console에 찍힌 scrollTop
*내려온 정도마다 배경색 다르게 하기*
다시 올라가도 원상복귀 되지 않는다.
더 다양한 이벤트 : https://www.w3schools.com/js/js_events_examples.asp
'프론트엔드 > JavaScript' 카테고리의 다른 글
| <JS> JS로 애니메이션 만들기 (setInterval,setTimeout) (0) | 2017.08.11 |
|---|---|
| <JS> 유저의 행위(event) (4) input form (0) | 2017.08.11 |
| <JS> 유저의 행위(event) (2) 키보드 (0) | 2017.08.11 |
| <JS> 유저의 행위(event) (1) 마우스 (0) | 2017.08.11 |
| <JS> DOM제어 예제1. 버튼 마다 다른함수 주기 (0) | 2017.08.10 |