[JS] 스크롤 이벤트 메모

 

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

스크롤바를 조작하면 scroll 이벤트가 발생

스크롤바 만질 때 마다 '안녕' 출력

유저가 스크롤 얼마나 했는 지 알아보기

JS - window.scrollY (전체 페이지 스크롤 양)

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

현재 페이지를 얼마나 위에서 부터 스크롤했는지 px 단위준다.(Y축 기준이니까)

window.scrollX 는 가로로 얼마나 스크롤했는지 알려줌 (X축 기준)

 

현재 페이지를 얼만큼 스크롤했는 지를 알고싶으면 - scrollY 

일반 div 박스일 경우에는 .scrollTop

Jquery

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

---

강제로 스크롤바 움직이게 하기

JS

window.scrollTo(0, 100)

100 px 만큼 밑으로 스크롤 해줌.

Jquery

 $(window).scrollTop(100)

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

현재 위치에서부터 스크롤

JS

window.scrollBy(0, 100)

현재 위치에서부터 100px 만큼 스크롤 해 주는 것.

---

박스를 끝까지 스크롤하면 alert()  띄우기
- 회원약관 다 내리면 알림창 띄우기

 

HTML

      <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 박스 하나 미리 준비.

css 적용

overflow-y:scroll

내용물 넘치면 스크롤바 생성해주는 css

---

div 의 스크롤바 내린 양 + (height의 값 = 눈에 보이는 div 박스의 높이)
== div 의 실제 높이( 스크롤가능한 실제 높이 )같아야 함.

window.scrollY (전체 페이지 스크롤바 내린 양)

JS - div박스 스크롤바 내린 양 구하기 - .scrollTop 사용

** 거기에 박스가 보이는 높이는 포함안함

document.querySelector(".lorem").addEventListener("scroll", function () {
  var 스크롤양 = document.querySelector(".lorem").scrollTop;
  console.log(스크롤양);
});

 현재 페이지 스크롤양도 .scrollTop으로 구할 수 있다. html 태그 찾아서 .scrollTop 붙이면 됩니다. 

JS - div의 실제높이 (height 말고 스크롤 가능한 실제 높이) - .scrollHeight 사용

document.querySelector(".lorem").scrollHeight;

---

$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  var 실제높이 = document.querySelector('.lorem').scrollHeight;
  console.log(스크롤양, 실제높이);
});

눈에 보이는 div 박스 높이 구하기

JS - .clientHeight 사용

 

document.querySelector('.lorem'). clientHeight;

---

 

div 의 스크롤바 내린 양( .scrollTop 사용)
+ (height의 값 = 눈에 보이는 div 박스의 높이 = .clientHeight 사용 )
== div 의 실제 높이( 스크롤가능한 실제 높이 =  .scrollHeight 사용  )같아야 함.

*스크롤바 만질 때 마다 코드 실행하고싶으면 스크롤 이벤트리스너 쓰기

---

숙제1. 페이지 스크롤바 100px 내리면 로고 폰트사이즈 작게

  $(window).on('scroll', function(){
    if (window.scrollY > 100) {
      $('.navbar-brand').css('font-size', '20px');
    }
  });

페이지 스크롤바를 100px 이상 내리면 폰트사이즈 작게

 

---

숙제2. 회원약관 박스 거의 끝까지 스크롤하면 alert 띄우기

div 박스 스크롤양 + 보이는높이 == 실제높이 비교

$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  var 실제높이 = document.querySelector('.lorem').scrollHeight;
  var 높이 = document.querySelector('.lorem').clientHeight;
  if (스크롤양 + 높이 > 실제높이 - 10) {
    alert('다읽음')
  }
});

 바닥~ 10px 위치에 스크롤바가 있을 때 alert를 띄워주기

---

현재 페이지를 끝까지 스크롤했는지 체크

document.querySelector('html').scrollTop;  //현재 웹페이지 스크롤양
document.querySelector('html').scrollHeight; //현재 웹페이지 실제높이
document.querySelector('html').clientHeight; //현재 웹페이지 보이는 높이임

html 태그 찾기