Jam's story

[JS] 스크롤 표시하기 본문

WEB/JavaScript

[JS] 스크롤 표시하기

애플쩀 2022. 6. 8. 16:57 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.08 16:42:42</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    body{
      margin: 0;
      font-size: 28px;
    }
    .header{
      position: fixed;
      top:0;
      z-index: 1;
      width:100%;
      background-color: #f1f1f1;
    }
    .header h2 { text-align: center;}
    .process-container{
      width:100%;
      height:8px;
      background:#ccc;
    }
    .progress-bar{
      height:8px;
      background-color: red;
      width:0;
    }
    .content{
      padding:100px 0;
      margin:50px  auto 0 auto;
      width:80%;
    }
  </style>
  <style>
    #btnTop{
      position: fixed;
      bottom:20px;
      right:30px;
      z-index: 99;
      outline: none;
      background: red;
      color:white;
      padding:15px;
      border-radius: 10px;
      
      display: none;
      border:none;   /* 버튼은  기본적으로 테두리가 있다.. */
    }
    #btnTop:hover{
      background: #555;
    }
  </style>
</head>
<body>
<h3>ex13.html</h3>
<div class="header">
   <h2>스크롤 표시하기</h2>
   <div class="process-container">
      <div class="progress-bar" id="myBar"></div>
   </div>
</div>
<!-- .content>p*40>lorem8 -->
<div class="content">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   <p>Repellat praesentium ex animi eos in excepturi quod?</p>
   <p>Quas a commodi labore quidem nihil ipsum reiciendis.</p>
   <p>Eum quisquam laboriosam modi impedit ipsam iste consectetur.</p>
   <p>Minima accusantium architecto minus ex odit exercitationem similique.</p>
   <p>Modi dolores quo ipsa voluptate eius ratione eum!</p>
   <p>Rem vel tempora repudiandae quod consequatur fugit sequi.</p>
   <p>Expedita assumenda eius molestias eum quas nisi aliquam!</p>
   <p>Tempora deleniti magnam minus ullam officiis tempore dolor!</p>
   <p>Molestias obcaecati eum impedit facere vel. Dolorem quod.</p>
   <p>Autem mollitia dolores vitae aspernatur consequatur ratione quis?</p>
   <p>Neque veritatis ut iste sequi debitis ex iure?</p>
   <p>Aliquam corporis dolore voluptatibus quas dolorum maxime animi.</p>
   <p>Officiis odit temporibus non assumenda laudantium quam labore.</p>
   <p>Id eum explicabo nulla quidem necessitatibus eos sapiente.</p>
   <p>Est quibusdam aliquid doloribus voluptatum iusto quis doloremque.</p>
   <p>Doloremque rem non voluptas quaerat rerum veniam odit?</p>
   <p>Dicta libero ab est incidunt accusantium voluptatum praesentium.</p>
   <p>Cumque est culpa provident distinctio consectetur voluptatem nobis.</p>
   <p>Explicabo ex error similique est magni nihil deleniti!</p>
   <p>Doloribus repellendus quos deleniti debitis delectus reprehenderit fuga!</p>
   <p>Consequatur quia architecto impedit aspernatur tempore alias dolores.</p>
   <p>Ea temporibus cumque laudantium autem similique distinctio omnis.</p>
   <p>Harum eligendi iusto saepe cumque tenetur delectus praesentium.</p>
   <p>Laborum culpa iure aspernatur omnis ipsum unde deserunt?</p>
   <p>Debitis voluptatibus distinctio maiores accusamus nesciunt facere voluptate!</p>
   <p>Eum dignissimos ut delectus ab atque tempore quaerat.</p>
   <p>Dicta ipsum esse quam modi eligendi possimus excepturi.</p>
   <p>Nobis velit culpa reprehenderit sit ut unde voluptatibus.</p>
   <p>Hic nostrum natus dolore laudantium odio aut et?</p>
   <p>Officiis autem voluptatem eveniet neque veniam accusantium corporis.</p>
   <p>Dolore eius id magni sint a quos ipsum.</p>
   <p>Dignissimos blanditiis aliquid inventore tempora ratione dolore ab.</p>
   <p>Officia aut ea cupiditate cumque non quae blanditiis.</p>
   <p>Officiis nemo sit eos dicta necessitatibus incidunt aliquid.</p>
   <p>Qui et libero nesciunt quia dolor quae optio.</p>
   <p>Ipsam itaque reprehenderit blanditiis quam dignissimos magni delectus!</p>
   <p>Amet officia dolorum temporibus maiores quos voluptates ea.</p>
   <p>Voluptas omnis soluta culpa fuga cupiditate sunt iure.</p>
   <p>Aut voluptas illo assumenda sed provident quod cupiditate!</p>
</div>

<!-- button#btnTop[title="Go  To Top"]>{Top} -->
<button id="btnTop" title="Go To Top">Top</button>
<script>
    window.onscroll=function(){
        var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
        var scrollHeight=document.documentElement.scrollHeight ;
        var clientHeight=document.documentElement.clientHeight ; //변함이 없는 888
        console.log(scrollHeight+"."+clientHeight+","+scrollTop);

        var hiddenHeight=scrollHeight-clientHeight;
        //100%:x=hH:sT;
        var widthPercent=(100*scrollTop)/hiddenHeight;
        document.getElementById("myBar").style.width=widthPercent+"%";
    }
</script>
</body>
</html>
저작자표시

'WEB > JavaScript' 카테고리의 다른 글

[JS] onclick 이벤트 처리  (0) 2022.06.09
[Js] Map  (0) 2022.06.09
[JS] 한문자씩 읽어오기  (0) 2022.06.08
[JS] call 로 메소드 호출  (0) 2022.06.08
[JS] export  (0) 2022.06.08
'WEB/JavaScript' Related Articles more
Comments