Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

CSS और JavaScript के साथ स्क्रॉल इंडिकेटर कैसे बनाएं?


CSS और JavaScript के साथ स्क्रॉल इंडिकेटर बनाने के लिए, कोड इस प्रकार है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body {
      font-size: 28px;
      margin:0px;
      padding:0px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .header {
      position: fixed;
      top: 0;
      margin-bottom: 100px;
      z-index: 1;
      width: 100%;
      background-color: #ebfffd;
   }
   .progressContainer {
      width: 100%;
      height: 20px;
      background: #ccc;
   }
   .progressBar {
      height: 20px;
      background: #724caf;
      width: 0%;
   }
   .content {
      padding: 100px 0;
      margin: 50px auto 0 auto;
      width: 80%;
   }
</style>
</head>
<body>
<div class="header">
<h1>Scroll indicator example</h1>
<div class="progressContainer">
<div class="progressBar"></div>
</div>
</div>
<div class="content">
<h1>Some headers</h1>
<h1>Some headers</h1>
<h1>Some headers</h1>
<h1>Some headers</h1>
<h1>Some headers</h1>
</div>
<script>
   window.onscroll = function() {showProgress()};
   function showProgress() {
      var scrollCalculate = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (scrollCalculate / height) * 100;
      document.querySelector(".progressBar").style.width = scrolled + "%";
   }
</script>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

CSS और JavaScript के साथ स्क्रॉल इंडिकेटर कैसे बनाएं?

पेज को नीचे स्क्रॉल करने पर प्रोग्रेस बार बढ़ जाएगा जैसा दिखाया गया है -

CSS और JavaScript के साथ स्क्रॉल इंडिकेटर कैसे बनाएं?


  1. सीएसएस और जावास्क्रिप्ट के साथ स्क्रॉल पर एक निश्चित/चिपचिपा शीर्षलेख कैसे बनाएं?

    CSS और JavaScript के साथ स्क्रॉल पर फिक्स्ड/स्टिकी हेडर बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font

  1. सीएसएस और जावास्क्रिप्ट के साथ स्नैकबार/टोस्ट कैसे बनाएं?

    CSS और JavaScript के साथ स्नैकबार/टोस्ट बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "S

  1. CSS और JavaScript के साथ अकॉर्डियन कैसे बनाएं?

    सीएसएस और जावास्क्रिप्ट के साथ एक अकॉर्डियन बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .demo {    background-color: #eee;    c