window.onscroll로 페이지 상단 스크롤 바 만들기
Javascript
<script>
window.onscroll = function() {createPrograssBar()};
function createPrograssBar() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("indicator").style.width = scrolled + "%";
}
</script>
window
window
window 객체는
브라우저 내에 있는모든 요소들이 담겨있는 객체이며,
전역적으로 사용이 가능하기에 '전역 객체'로 불리운다.
window browser, 즉 브라우저 창을 제어하는 여러 가지의 메서드를 제공한다.
전역객체로서 존재하기 때문에 사실상 생략하여도 무관하다.
onscroll
onscroll
onscroll 함수를 사용하면
사용자가 페이지를 스크롤할 때 발생하는 이벤트를 감지할 수 있다.
window.onscroll
window.onscroll = function() { createProgressBar() };
createProgressBar() 함수가
이 이벤트가 발생할 때마다 호출된다.
function createProgressBar() {
// 현재 스크롤 위치
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
// 문서 전체 높이
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
// 스크롤된 비율 계산
var scrolled = (winScroll / height) * 100;
// 진행률 표시 막대의 너비 설정
document.getElementById("indicator").style.width = scrolled + "%";
}
document.body.scrollTop, document.documentElement.scrollTop
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
document.body.scrollTop이나 document.documentElement.scrollTop은
현재 스크롤 위치를 y축 방향으로 스크롤한 거리를 나타낸다.
참고로 document.documentElement.scrollLeft는
x축 방향으로 스크롤한 거리를 나타낸다.
documentElement는 IE, Firefox에서 사용하며,
body는 .Chrome, Safari, Opera, Edge 등에서 사용한다.
그리고 pageXOffset은 Firefox, cfrome, Safari, Opera, Edge, IE>=9에서 사용한다.
반응형
document.documentElement.scrollHeight, documentElement.clientHeigth
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
document.documentElement.scrollHeight는
문서 전체 높이를 나타낸다.
document.documentElement.clientHeigth는
현재 브라우저창의 높이를 나타낸다.
즉 브라우저 창의 전체 높이에서
현재 브라우저 창의 높이를 뺀 값을 사용하는것이다.
var scrolled = (winScroll / height) * 100;
winscroll에는 y축으로 이동한 현재 스크롤 위치의 값이 계산되어 있고,
height에는 전체 브라우저창 높이에서 어느 정도의 높이에 해당하는지가 계산돼 있다.
이 두 값을 나누면 페이지에서 얼마나 스크롤 되었는지에 관한 진행률을 스크롤바에 나타낼 수 있다.
만약 winscroll이 500dlrh, height가 1000이라면,
(winScroll / height) = 0.5가 된다.
즉 스크롤 위치가 전체 문서의 중간에 해당한다는 의미이다.
이를 *100을 통해이 비율을 백분율로 변환하면,
scrolled에 50이 저장된다.
getElementById()
document.getElementById("indicator").style.width = scrolled + "%";
getElementById() 함수에는
indicator이라는 인자값을 ID로 설정하여
HTML <body> 내에 있는 class id와 상호작용 한다.
style.width를 사용해 스타일 요소 중에서 width를 설정하겠다는 의미이다.
%의 경우에는
계산된 scrolled 값을 퍼센트로 변환해 진행률을 나타내는 스크롤 바의 너비로 설정하게 된다.
HTML
<div class = "progress-container">
<div class = "progress-bar" id = "indicator"></div>
</div>
class 명을 progress-bar로 지정하여 CSS에서 불러올 수 있도록 한다.
id는 indicator로 설정해 javascript를 불러올 수 있도록 한다.
CSS
.progress-bar {
height: 8px; /* 높이 */
background: #FFE08C; /* 색상 */
width: 0%;
}
class 명인 progress-bar에 관한 스타일을 지정한다.
width는 처음 0%인 상태로 시작하도록 설정한다.
728x90
728x90
반응형
'프로그래밍 언어 > Javascript' 카테고리의 다른 글
| [ Node.js ] Node __dirname과 __filename (4) | 2023.06.02 |
|---|---|
| [ Javascript ] What is the 'httpRequest.readyState == 4'? (0) | 2023.03.06 |
| [ Javascript ] How to use 'json.stringify()'? (2) | 2023.02.23 |
| [ Javascript ] What is the 'jQuery'? (0) | 2023.02.23 |
