100% 가 아니라 156%가 나와요.

Question

js 문제인가 싶어 선생님 소스를 그대로 갖다 써봤는데도 결과물 최대치가 156%가 나옵니다. css 문제인가도 싶은데 당췌 뭐가 잘못된건지 모르겠어요. < body > < div class = "wrap" > < section class = "sec01" > < article class = "content" > < div class = "progress" > 0% 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 가 .content { width : 1000px ; margin : 100px auto ; } .content .progress { position : fixed ; left : 50% ; top : 500px ; width : 70% ; height : 100px ; margin-left : -35% ; border : 1px solid #222 ; text-align : center ; line-height : 100px ; } .content .progress .bar { display : block ; width : 0% ; height : 100% ; background-color : #111 ; } var text = $ ( ".progress .txt" ); var progressBar = $ ( ".progress .bar" ); function getPercent () { var scrollHeight = $ ( '.sec01' ). height (); var scrollRealHeight = ( scrollHeight - $ ( window ). height ()); var winScrollTop = $ ( window ). scrollTop (); var scrollPercent = ( winScrollTop / scrollRealHeight ) * 100 ; var textPercent = Math . floor ( scrollPercent ); render ( textPercent , scrollPercent ); } function render ( textPercent , scrollPercent ) { text . text ( textPercent + "%" ); progressBar . css ({ width : scrollPercent + "%" }); } function init () { getPercent (); } $ ( window ). scroll ( function () { getPercent (); }) init ();

깡코딩 · Answer

안녕하세요 :) 섹션2-1의 스크롤 높이는 sec01엘리먼트를 기준으로 합니다. 그쵸!? (조금 더 확실한 해답이 궁금하다면 섹션5를 참고하세요) 해결방법.1 그럴경우 하위 요소인 content에 마진값을 넣을경우 스크롤 높이가 달라져 스크롤 값이 더 크게 나오게 됩니다. content요소에 margin 이 아닌 패딩을 사용해보세요! 해결방법.2 섹션2-1에서 스크롤 엘리먼트의 높이값은 사용자가 고정 값으로 설정한게 아니라 폰트의 길이로 설정되도록 되어있죠?? 그럴경우 웹폰트의 다운 속도가 느린 환경에서 스크롤 높이를 제대로 가지고 오지 못하는 상황이 생길 수 있습니다. 이런 문제까지 고려해서 프로그래밍을 하고 싶다면 속도는 조금 느리지만 $(function(){}) <- 도큐먼트 레디가 아닌 window.onload = function(){} <- 온로드 이벤트를 사용해보세요! 속도는 조금 느리지만 모든 요소를 로드하기 때문에 안전하답니다 :) 조금 더 확실한 해답이 궁금하다면 섹션5까지 수업을 진행해 보시고 그래도 모르겠다면 다시 한번 질문 주시면 될 것 같습니다 :) 그럼 또다른 궁금증이 생길때 문의주세요 ^^