[JavaScript] 스크롤 이벤트

<script>

window.addEventListener('scroll',function(){})

</script>

window : document와 비슷한 의미, 현재 html 페이지를 의미

scroll 이벤트리스너 쓸때는 window 쓰기

 

★ jQuery

$(window).on('scroll',function(){})

 

 

 

 

● 유저가 스크롤바를 얼만큼 내렸는지 알려줌(현재 스크롤바 위치 출력)

(가로 스크롤은 scrollX)

window.scrollY​

 

 

 

 

● 한번의 스크롤로 y위치에 가기

ex) window.scrollTo(0,100) : 스크롤바 한번 내리면 위치 100으로 이동

window.scrollTo(x,y)

 

 

 

● 현재위치에서 y만큼 스크롤 해주세요

window.scrollBy(x,y)

 

 

 

 

 

★ jQuery

$(window).scrollTop()

ex)

$(window).scrollTop():스크롤 양

$(window).scrollTop(100) : 맨위에서 부터 아래로 100만큼 스크롤

 

 

 

예제1) 스크롤바 10으로 내리면 로고 폰트사이즈 작아지는 이벤트 생성하기

window.addEventListener('scroll',function(){ 
                console.log(window.scrollY);
                if(window.scrollY>=10){
                    $('.navbar-brand').css('font-size','15px')
                }
            })

 

 

예제2) 회원약관의 스크롤바를 끝까지 내리면 알림창 띄우기

*끝까지 스크롤 했는지 알수있는 방법 → <div>의 실제 높이 와 <div>에서 스크롤 내린 양 + 눈에 보이는 <div> 높이가 같을때

//회원약관의 스크롤바 끝까지 내리면 alert()띄워서 안내하기
//div의 스크롤바 내린 양 + 눈에 보이는 div 높이 == div 실제 높이
            $('.userpro').on('scroll',function(){
                var 스크롤양 = document.querySelector('.userpro').scrollTop; 
                var 실제높이 = document.querySelector('.userpro').scrollHeight; //<div>실제높이(스크롤바 얼마나 할수있는지)
                var 눈에보이는높이 = document.querySelector('.userpro').clientHeight;

                console.log(스크롤양,실제높이,눈에보이는높이);

                if(스크롤양+눈에보이는높이==실제높이){
                    alert('약관을 다 읽어보셨군요?');
                }
            })

 

scroll 다룰때 주의점

1) scroll 이벤트리스너 안의 코드는 1초에 60번 이상 실행됨- 컴퓨터한테 부담줄수 있음

2)바닥체크가 여러번 실행됨

 

현재페이지 끝까지 스크롤 했는지 체크하는 방법은?

전체 html 태그를 찾아서 실제 웹페이지 높이 찾기

 

실무에서 스크롤이벤트로 스크롤 진척도 만들수있음