19. scroll (1)

‘scroll’ event

---

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

전체 페이지에 scroll 이벤트를 달면 스크롤할 때 마다 원하는 코드를 실행 가능하다.

window.scrollY

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

window.scrollY 사용하면 현재 페이지를 얼마나 위에서 부터 스크롤 했는지 px단위로 알려준다.

반대로 scrollX는 가로로 얼마나 스크롤 했는지 얄려준다.

window.scrollTo

window.scrollTo(0, 100)

window.scrollTo(x, y)를 실행하면 강제로 스크롤바를 움직일 수 있다.

bootstrap을 설치했을 경우 부드럽게 이동을 시켜준다.

이를 피하고 원래의 값을 원한다면

:root{ scroll-behavior: auto }

$(window).scrollTop()

jQuery 방식은 더 짧다.

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

페이지 강제 이동도 가능하다.

div박스의 스크롤 값

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

scrolllHeight

스크롤바가 생긴 박스의 스크롤 가능한 실제 높이는 몇일까?

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