<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#scrollBars{ position:fixed; height:8px; background-color:red; width:0; left:0; top:0; transition-duration:0.3s;}
</style>
<script type="text/javascript">
var barId = "scrollBars";
window.onload = function () {
// bar 개체생성
var barElm = document.createElement("div");
barElm.setAttribute("id", barId);
// body 에 추가
document.body.appendChild(barElm);
// 문서의폭
var bMax = document.body.clientWidth;
// 문서의 높이
var bH = document.body.clientHeight;
// 화면의 높이
var wH = window.innerHeight;
// 초기 세팅
document.getElementById(barId).setAttribute("style", "width:" + Math.floor(window.scrollY / (bH - wH) * 100) + "%");
// 스크롤 이벤트 등록
document.addEventListener("scroll", function (e) {
// 스크롤이 이동할때마다 처리
document.getElementById(barId).setAttribute("style", "width:" + Math.floor(window.scrollY / (bH - wH) * 100) + "%");
}, true);
}
</script>
</head>
<body>
<div style="width:100%; height:5000px;">이건그냥 스크롤용으로 만든 태그</div>
</body>
</html>
19. 5. 16.
Javascript 페이지 스크롤상 위치 상단표시
간혹 블러그에 보이길래 그냥 만들어봄
피드 구독하기:
댓글 (Atom)
댓글 없음:
댓글 쓰기