스크롤 이벤트로 만드는 재밌는 기능들

<script>
    //유저가 스크롤를 얼마나 내렸는지 알고 싶을때?
    //윈도우가 스크롤 했을때 코드 실행~
    
    window.addEventListener('scroll',function(){
    console.log(window.scrollY) //유저가 얼마나 스크롤바를 내렸나 콘솔로 출력가능, X는 가로 Y는 세로
    window.scrollTo(0,100); // 강제로 스크롤 하기, xy px단위
    window.scrollBy(10,10); //현재위치 기준으로부터 강제로 스크롤해줌, (ex 버튼 클릭시 스크롤 이만큼 이동)
    });
 </script>

//스크롤바 100px 이상 내리면 로고폰트사이즈 줄이기, 단 100px 미만이면 다시 키우기
    window.addEventListener('scroll',function(){
    if(window.scrollY > 100){
    $('.navbar-brand').css('font-size','15px');
    }else{
      $('.navbar-brand').css('font-size','25px');
    }
    });

 

상자박스의 스크롤을 다 내렸을때, 알림을 띄우려면?

<div class="lorem" style="width: 200px; height: 100px; overflow-y: scroll">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit debitis at, laborum ipsa itaque placeat sit, excepturi eius. Nostrum perspiciatis, eligendi quae consectetur praesentium exercitationem.
       </div>

//div박스 스크롤을 끝까지 내릴때, 알림띄우기
    $('.lorem').on('scroll',function(){
    // 스크롤양, 실제높이, 보이는높이를 변수에 담아준다
    var 스크롤양 = document.querySelector('.lorem').scrollTop;
    var 실제높이 = document.querySelector('.lorem').scrollHeight;
    var 보이는높이 = document.querySelector('.lorem').clientHeight;
    //div 스크롤바 내린 양 + div가 화면에 보이는 높이 == div 실제높이일 경우 alert 띄워주세요~
    if(스크롤양 + 보이는높이 > 실제높이 -10){ //소수점때문에 -10해줌
    alert('끝까지 내리셨군요!')
    }
    });

 

 

 

코딩애플님왈,,,

 

오늘의 교훈이 뭐냐면

저런거 코드 외워봤자 다음날 다 까먹습니다. 

1. 스크롤바 조작할 때 마다 코드실행가능하구나

2. 박스의 숨겨진 실제 높이도 구할 수 있구나 

3. 스크롤내린 양도 구할 수 있군

이런거 이해하고 지나가면 충분합니다. 문법은 필요할 때 찾아쓰면 됩니다.