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>स्क्रॉल इंडिकेटर उदाहरण</h1>
    <div class="progressContainer">
      <div class="progressBar"></div>
    </div>
  </div>
  
  <div class="content">
    <h1>कुछ हेडर्स</h1>
    <h1>कुछ हेडर्स</h1>
    <h1>कुछ हेडर्स</h1>
    <h1>कुछ हेडर्स</h1>
    <h1>कुछ हेडर्स</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>

आउटपुट

• शीर्ष पर फिक्स्ड हेडर में प्रोग्रेस बार
• स्क्रॉल डाउन करने पर: बार बाएं से दाएं भरता है (0% → 100%)
• पेज अंत पर: बार 100% भरा हुआ

गणना समझाया

// वर्तमान स्क्रॉल पोजीशन
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

// कुल स्क्रॉल करने योग्य ऊंचाई
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;

// प्रतिशत (0-100)
var percentage = (scrollTop / scrollHeight) * 100;

प्रदर्शन अनुकूलन

• window.onscroll पर डायरेक्ट हैंडलर के बजाय requestAnimationFrame या IntersectionObserver उपयोग करें
• passive: true इवेंट लिसनर विकल्प जोड़ें
• CSS position: sticky विकल्प (नो JS):

/* CSS-only विकल्प (सीमित) */
.progressBar {
  position: sticky; top: 0;
  width: 100%; height: 3px;
  background: linear-gradient(to right, #724caf var(--scroll, 0%), transparent 0%);
}
/* JS अभी चाहिए --scroll कस्टम प्रॉपर्टी अपडेट करने के लिए */