js, jquery 퍼센트 스크롤

js. jquery 퍼센트 스크롤

 

JS

window.addEventListener("scroll", function () {
    var per = ((window.scrollY / (document.body.clientHeight - window.innerHeight)) * 100);
    box.style.width = per + "%";
    console.log(per.toFixed(0) + "%");
})

 

jquery

 

$(window).on("scroll", function(){
    var percent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;
    $('.box__width').css('width', percent+"%");
    console.log(percent.toFixed(0) + "%");
})

 

스크롤 다룰 때 주의점

1. 스크롤 이벤트리스너 안의 코드는 1초에 60번 이상 실행된다. 

그래서 스크롤 이벤트리스너는 많이 달면 성능저하가 일어나니 스크롤바 1개마다 1개만 쓰는걸 권장한다. 

 

2. 스크롤이벤트리스너 안의 코드는 1초에 여러번 실행되다보니 바닥체크하는 코드도 여러번 실행될 수 있다. 

그래서 이에 대해 처리를 해줘야 한다.