Scroll

아이디어: 스크롤바 100px누르면 상단에 고정된 글씨 작게만들기

 

 

우선 스크롤 생성을 위해 JS 직전 부분에 아래의 코드를 생성한다

         <div style="height: 1000px"></div> <!--세로로 길게 만듦-->

 

 

css에 navbar 관련 내용을 추가한다.

.navbar {
  position: fixed;
  /*이러면 스크롤 내려도 상단고정*/
  width:100%;
  /*앞 or 뒤로 보내기*/
  z-index: 5;
}

.navbar-brand {
  font-size: 30px;
  transition: all 1s;
}

 

 

 

스크롤 관련 조작은 다음과 같다.

window.addEventListener('scroll', function(){
  console.log('안녕')
});

스크롤한 만큼 안녕 출력하기

 

 

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

스크롤을 얼마나 위에서 내렸는지(Y방향. X는 가로방향)

 

 

window.scrollTo(0, 100)

0,100위치로 스크롤 강제 이동

 

window.scrollBy(0, 100)

현재 위치에서 0,+100만큼 스크롤 강제 이동

 

 

 

 

bootstrap 사용시 스크롤 이동이 스무스하다. 바로 딱 떨어지게 이동을 원한다면

CSS파일 제일 위에 이것을 삽입한다.

:root { scroll-behavior : auto }

 

 

 

 

사실 JQuery가 쉽고 간편하다.

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

scrollTop() 아무것도없으면 스크롤 얼마나 움직였는지 측정

값을 넣으면 해당 위치로 이동해준다.

 

scrollBy효과를 원하는 경우 걍 window.scrollBy()가 더 짧고 간편하다..

 

 

그렇다면

 

 

' 스크롤바 100px누르면 상단에 고정된 글씨 작게만들기' 를 실행하려면 JS는

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

 

이렇게 작성하면 된다.

 

 

 

 

 

그렇다면 div내에 생긴 스크롤바를 다 읽으면 알림창 띄우기는 어떻게 할까?

 

         <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>

이런 약관창을 아래에 집어넣고 (overflow-y는 공간이 좁으면 스크롤하라는 의미)

스크롤 다 내리면 알림창을 띄게 해보자

 

 

 

우선 다음의 JS를 통해 div상 스크롤 끝이 어디인지를 콘솔창으로 확인한다.

            $('.lorem').on('scroll', function(){
            console.log($('.lorem').scrollTop());
            });

물론 mac과 같은 운영체제에 따라 10정도 차이날수있음에 유의한다.

필자는 164가 나왔다.

 

 

 

            $('.lorem').on('scroll', function(){
              if ($('.lorem').scrollTop() > 150){
                alert('you read all!');
                $('.lorem').off('scroll'); 
                // 스크롤 이벤트 핸들러 제거
              }
            })

여기서 150이상이면 alert가 계속 뜨므로 off를 꼭 해주어야한다. 이러면 한번 읽고나면 다시 alert가 뜨지 않는다.

 

 

 

참고로 전체페이지 스크롤 다읽음 정도를 측정할 때는 모든 내용이 로드되고난 뒤에 측정하는 것이 정확한편이며

브라우저마다 오차가 있어서 테스트는 필수이다.