Inflearn Community Q&A
asked
100% 가 아니라 156%가 나와요.
Written on
·
179
0
js 문제인가 싶어 선생님 소스를 그대로 갖다 써봤는데도 결과물 최대치가 156%가 나옵니다.
css 문제인가도 싶은데 당췌 뭐가 잘못된건지 모르겠어요.
<body>
<div class="wrap">
<section class="sec01">
<article class="content">
<div class="progress">
<span class="bar"></span>
<p class="txt">0%</p>
</div>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
가<br>
</article>
</section>
</div>
</body>
.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();
javascript인터랙티브-웹HTML/CSSjquery
Answer 1
0
ggangcoding162118
Instructor
안녕하세요 :)
섹션2-1의 스크롤 높이는 sec01엘리먼트를 기준으로 합니다. 그쵸!?
(조금 더 확실한 해답이 궁금하다면 섹션5를 참고하세요)
해결방법.1
그럴경우 하위 요소인 content에 마진값을 넣을경우 스크롤 높이가 달라져 스크롤 값이 더 크게 나오게 됩니다. content요소에 margin 이 아닌 패딩을 사용해보세요!
해결방법.2
섹션2-1에서 스크롤 엘리먼트의 높이값은 사용자가 고정 값으로 설정한게 아니라
폰트의 길이로 설정되도록 되어있죠??
그럴경우 웹폰트의 다운 속도가 느린 환경에서 스크롤 높이를 제대로 가지고 오지 못하는 상황이 생길 수 있습니다.
이런 문제까지 고려해서 프로그래밍을 하고 싶다면 속도는 조금 느리지만
$(function(){}) <- 도큐먼트 레디가 아닌
window.onload = function(){} <- 온로드 이벤트를 사용해보세요!
속도는 조금 느리지만 모든 요소를 로드하기 때문에 안전하답니다 :)
조금 더 확실한 해답이 궁금하다면 섹션5까지 수업을 진행해 보시고 그래도 모르겠다면 다시 한번 질문 주시면 될 것 같습니다 :)
그럼 또다른 궁금증이 생길때 문의주세요 ^^