[코딩애플] 스크롤 이벤트

스크롤바 위치 찾기 : window.scrollY, window.scrollTop()

window.addEventListener('scroll', function(){
    console.log(window.scrollY); //window.pageYOffset과 동일한 기능(이쪽이 호환성이 더 떨어짐)
})

//jquery버전
$(window).on('scroll', function(){
     $(window).scrollTop() //(100) 괄호안에 숫자를 넣으면 현재스크롤바 이동
});

더 알아가기 : scrollTop은 현재 스크롤바 이동 기능도 겸한다.

강제로 맨 위에서부터 스크롤하기 : scrollTo(x,y)

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

더 알아가기 : bootstrap을 html에 추가해뒀더니 스무스하게 움직였다. 이 경우 css :root에 scroll-behavior: auto;를 넣으면 이를 해제한다.

강제로 현재위치에서부터 스크롤하기 : scrollBy(x,y)

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

---

출처 : 코딩애플 https://codingapple.com/ / MDN https://developer.mozilla.org/ko/