[자바스크립트] 스크롤 이벤트

스크롤 이벤트

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

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

스크롤 이벤트이다.

(아래는 jQuery)

 

  window.addEventListener('scroll',function(){
            window.scrollTo(0,100); //(0,100)으로 강제 스크롤
            window.scrollBy(0,100); //현재위치에서부터 (0,100)만큼 스크롤
            window.scrollY; //Y축으로 얼마나 스크롤했는지 
            
        })
        
        $(window).on('scroll',function(){
            $(window).scrollTop(100); //100으로 강제 스크롤
            $(window).scrollTop(); //얼마나 스크롤 했는지
        })

이런 메소드들을 사용하면 된다.

 

 

---

스크롤하면 내브바 글씨가 작아지게 하기

$(window).on('scroll',function(){
            if($(window).scrollTop()>100){
                $('.navbar-brand').css('font-size','15px');
            }
            else{
                $('.navbar-brand').css('font-size','25px');
            }
        })

간단하게 스크롤 이벤트 하나 추가해주면 된다.

---

약관을 다 읽으면 alert 띄우기

    <div class="lorem" style="width: 200px; height: 100px;overflow-y: scroll">
        제 1장 총칙

        제 1 조(목적)

        본 약관은 국가공간정보포털 웹사이트(이하 "국가공간정보포털")가 제공하는 모든 서비스(이하 "서비스")의 이용조건 및 절차, 회원과 국가공간정보포털의 권리, 의무, 책임사항과 기타 필요한 사항을 규정함을 목적으로 합니다.
    </div>

이런 박스가 하나 있다고 하자.

이렇게 스크롤바가 있는 박스가 생겼다.

이 스크롤바를 끝까지 내렸을 때 alert를 띄워보자.

 

        $('.lorem').on('scroll',function(){
            var len=$('.lorem').prop('scrollHeight')-$('.lorem').innerHeight();
            console.log(len, $('.lorem').scrollTop());
            if($('.lorem').scrollTop()>=len-1){
                alert('다 읽으셨네요');
            }
        })

이렇게 자바스크립트(jQuery)를 작성 해 보았다.

len은 scrollTop()으로 얻을 수 있는 값의 최댓값이다.

scrollTop()을 사용하면, 기본화면 크기만큼은 스크롤 양에서 제외되기 때문에

innerHeight만큼을 len에서 빼주었다.