[JS] 스크롤바 퍼센트 구하기

 

 

[html]
//↓↓객체 접근을 위해서 제이쿼리 사용하였음
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
//↓↓ 부모영역
<div class="contents"> 
		//↓↓ 내용영역 ID메인안에 넣어야 됩니다	
        <div id="main"> 
            <h1>What is Lorem Ipsum?</h1><br>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>
          
            <h1>What is Lorem Ipsum?</h1><br>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>
          
            <h1>What is Lorem Ipsum?</h1><br>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>
          
            <h1>What is Lorem Ipsum?</h1><br>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>
          
            <h1>What is Lorem Ipsum?</h1><br>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>
          
            <h1>What is Lorem Ipsum?</h1><br>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>
        </div> 
    </div>

 [css]
//↓↓초기화
*{margin: 0; padding: 0;}
//↓↓새로 추가할 ID퍼센트 설정
#percent { position: fixed; top: 0; height: 6px; background: red; width: 0%; } 
//↓↓부모 영역 설정 ※오버플로우 꼭 설정해줘야 된다.
.contents { height: 100vh; font-size: 0.95rem; overflow: auto; }

[js]
//↓↓ div를 추가해준다
//html에 미리 선언해 줘도 상관없다.
var percent = '<div id="percent"></div>'; 
$(".contents").append(percent); 

//contents에서 스크롤을 감지하면 작동하는 함수
$(".contents").on("scroll", function() { 
//현재의 퍼센트 값 구하는 공식 
//현재 퍼센트 값 = 부모영역의 스크롤 높이 / (ID메인의 전체 높이 - 부모역역의 높이 )
var currentPercentage = $(".contents").scrollTop() / ($("#main").outerHeight() - $(".contents").height()); 
//결과 = ID퍼센트의 넓이(부모영역의 전체 넓이() * 현재 퍼센트 값)
var result = $("#percent").width( $(".contents").outerWidth() * currentPercentage); 
});

See the Pen contents scroll by 윤재현 (@jh91) on CodePen.