[JavaScript] 세로 스크롤 위치 퍼센트에 따른 가로 스크롤 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Indicator on Scroll</title>
<style>
body, html { margin: 0; padding: 0; height: 300%; } /* 데모를 위한 높이 설정 */
.progressBar {
position: fixed;
top: 0;
left: 0;
height: 10px;
background-color: blueviolet;
width: 0%; /* 초기 너비 설정 */
}
</style>
</head>
<body>
<div class="progressBar"></div>
<script>
const progressBar = document.querySelector('.progressBar');
window.addEventListener('scroll', () => {
const totalHeight = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
progressBar.style.width = `${totalHeight}%`;
});
</script>
</body>
</html>
See the Pen Progress Indicator on Scroll by gaae (@gaae) on CodePen.