1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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)