• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

21.07.01 09:17 작성 조회수 97

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();
course-thumbnail

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

2-1 [코드설명] 기초다지기! 이동할 거리 백분율 구하는 방법

강의실 바로가기

답변 1

답변을 작성해보세요.

0

깡코딩님의 프로필

깡코딩

지식공유자

2021.07.01

안녕하세요 :)

섹션2-1의 스크롤 높이는  sec01엘리먼트를 기준으로 합니다. 그쵸!?

(조금 더 확실한 해답이 궁금하다면 섹션5를 참고하세요)

해결방법.1

그럴경우 하위 요소인 content에 마진값을 넣을경우 스크롤 높이가 달라져 스크롤 값이 더 크게 나오게 됩니다.   content요소에 margin 이 아닌 패딩을 사용해보세요!

해결방법.2

섹션2-1에서 스크롤 엘리먼트의 높이값은 사용자가 고정 값으로 설정한게 아니라

폰트의 길이로 설정되도록 되어있죠??

그럴경우 웹폰트의 다운 속도가 느린 환경에서 스크롤 높이를 제대로 가지고 오지 못하는 상황이 생길 수 있습니다.

이런 문제까지 고려해서 프로그래밍을 하고 싶다면 속도는 조금 느리지만

$(function(){}) <- 도큐먼트 레디가 아닌

window.onload  = function(){} <- 온로드 이벤트를 사용해보세요!

속도는 조금 느리지만 모든 요소를 로드하기 때문에 안전하답니다 :)

조금 더 확실한 해답이 궁금하다면 섹션5까지 수업을 진행해 보시고 그래도 모르겠다면 다시 한번 질문 주시면 될 것 같습니다 :)

그럼 또다른 궁금증이 생길때 문의주세요 ^^

이 글과 비슷한 Q&A