스크롤 이벤트 응용과제 질문입니다.

5 글 보임 - 1 에서 5 까지 (총 5 중에서)

글쓴이

글

2022년 10월 4일 13:52 #49051

참가자

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand">JBShop</span>
    <button class="navbar-toggler" type="button">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

<div class="line"></div>

<div class="empty-box"></div>

window.addEventListener('scroll',function(){
  var 스크롤양 = window.scrollY;
  var 실제양 = document.querySelector('html').scrollHeight;
  var 창크기 = document.querySelector('html').clientHeight;

  var n = (스크롤양 + 창크기)/실제양 * 100

  document.querySelector('.line').style.width =n+'%';

});

스크롤 내리는 양에 비례하여 디브박스의 너비가 길어지도록 짜보았는데요. 무엇이 문제인지 잘 동작이 안되고 있습니다.
혹시 body태그에도 너비를 주어야하나 싶어서 그렇게도 해보았는데요. (width: 100vw)
그래도 문제가 해결되지 않는데, 이유가 무엇일까요?

2022년 10월 4일 14:46 #49056

codingapple

키 마스터

개발자도구에서 width는 잘 변하고 있나 확인해봅시다

2022년 10월 4일 19:00 #49149

김준범

참가자

window.addEventListener('scroll',function(){
let 현재스크롤양 = window.scrollY;
let 실제양 = document.querySelector('html').scrollHeight;
let 창크기 = document.querySelector('html').clientHeight;
let 전체스크롤양 = 실제양 - 창크기;
let n = 현재스크롤양/전체스크롤양 * 100
 
 document.querySelector('.line').style.width =n+'%';
});

제가 수식을 잘못 생각했던 거 같습니다 ㅎㅎ; 이렇게 짜고나서 개발자 도구에서 width가 0%~100%까지 잘 들어오고 있는 것은 확인하였는데요.
그래도 동작이 되질 않습니다. body태그에 이 넓이 저 넓이 정해줘봐도 안됩니다.. ㅠ ㅠ 
뭐를 못찾고 있는 걸까요..; 아래는 디브박스(.line)의 css값입니다.

.line {
background-color:black;
height: 58px;
}

2022년 10월 4일 21:08 #49176

codingapple

키 마스터

아예 안보이는거면 position fixed 이런거 줘봅시다

2022년 10월 6일 04:05 #49351

뷰이

참가자

제가 쓴 코드 올려드립니다. 도움되시길 바래요.
position fixed 하시면 바로 해결될거같긴합니다.

JS //

      $(window).on("scroll", function () {
        var 페이지스크롤양 = window.scrollY;
        var 페이지실제높이 = document.querySelector("html").scrollHeight;
        var 페이지높이 = document.documentElement.clientHeight;
        var 페이지스크롤퍼센트 =
          (페이지스크롤양 / (페이지실제높이 - 페이지높이)) * 100;
        console.log(페이지스크롤퍼센트);
        var perPage = 페이지스크롤퍼센트 + "%";
        $(".percentBar").css("width", perPage);
      });

CSS //

.percentBar {
  position: fixed;
  width: 0%;
  z-index: 5;
  height: 2px;
  background-color: black;
}

글쓴이

글

5 글 보임 - 1 에서 5 까지 (총 5 중에서)

답변은 로그인 후 가능합니다.

로그인

스크롤 이벤트 응용과제 질문입니다.

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png