<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.textBox{
background: black;
color:white;
height: 10000px;
padding: 50px;
}
.progressBar{
width: 100%;
height: 15px;
position:fixed;
top:0;
left:0;
background:white;
z-index: 2;
}
.progress{
width: 0%;
height: 15px;
position:fixed;
top:0;
left:0;
background:#ffd500;
z-index: 2;
transition: all 0.4s ease;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
</style>
<body>
<div class="textBox">
<div class="progressBar"></div>
<div class="progress"></div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ipsam numquam eveniet, distinctio nobis nulla hic obcaecati nihil omnis
id aspernatur nesciunt ut ea amet earum, enim dolorum nisi ducimus facilis.
</div>
<script>
let docSize = document.querySelector('html');
let proChange = document.querySelector('.progress');
// console.log(docSize.scrollHeight);//10116
// console.log(docSize.clientHeight);
// console.log(docSize.scrollTop);
boxHeight = docSize.scrollHeight;
window.addEventListener('scroll',function(){
let width_value = (docSize.scrollTop/(docSize.scrollHeight-docSize.clientHeight)) * 100;
console.log(width_value + '%');
// console.log(window.scrollY);
proChange.style.width = width_value + '%';
// progressbar 진행상태 100%일 때 테두리 사각형. 그 전에 테두리 둥글게.
if(width_value >= 100){
proChange.style.borderTopRightRadius = '0px';
proChange.style.borderBottomRightRadius = '0px';
}else if(width_value < 100){
proChange.style.borderTopRightRadius = '20px';
proChange.style.borderBottomRightRadius = '20px';
}
});
</script>
</body>
</html>
원리:
* 화면 상단에 width: 100%인 하얀색 bar를 하나 만들고, 그 위에 width: 0%으로 한 노란색 bar를 만든다.
* scrollTop 값(현재 스크롤 위치 값)이 실제 div 박스의 높이인 scrollHeight에서 내가 보고 있는 박스의 높이 clientHeight의 몇 퍼센트인지 구하고, 그만큼 노란색 바의 width를 늘려 주면 된다.
(scrollTop + clientHieght = scrollHeight 이므로)
'Javascript' 카테고리의 다른 글
| 객체 안의 객체 접근, 객체 안의 배열 접근 (0) | 2023.03.29 |
|---|---|
| 상품을 localStorage에 담아두는 코드 (0) | 2023.02.24 |
| [javascript] 형제요소 탐색하기 (nextElementSibling, previousElementSibling) (0) | 2023.02.23 |
| [javascript] localStorage로 브라우저에 데이터 보관하기 (0) | 2023.02.23 |
| javascript 코드 작동원리와 코드 실행 미루기(DOMContentLoaded) (0) | 2023.02.23 |