Merge pull request #154 from aslams2020/contributorspage

✔️Added Custom Scrollbar + Scrollprogress in Contributors page
MastanSayyad · Oct 26, 2024 · 6e2eaf1 · 6e2eaf1
2 parents d4e6899 + 9235519
commit 6e2eaf1
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/contributors.html b/contributors.html
@@ -5,6 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Contributors</title>
     <style>
+        ::-webkit-scrollbar {
+        width: 6px !important; 
+        }
+
+        ::-webkit-scrollbar-track {
+        background: rgb(252, 185, 252) !important; 
+        }
+
+        ::-webkit-scrollbar-thumb {
+        background: rgb(209, 72, 209) !important;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+        background: rgb(155, 33, 155) !important; 
+        }
+
+
         body {
             font-family: 'Arial', sans-serif;
             margin: 0;
@@ -88,11 +105,31 @@
             background: rgba(219, 127, 219, 0.8);
             transform: scale(1.05);
         }
+        #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: #f3f3f3; 
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            /* width: 0%; */
+            height: 100%;
+            background-color: rgb(219, 127, 219);
+        }
     </style>
 </head>
 <body>
     <h2>Contributors</h2>
     <div class="contributors-container" id="contributors"></div>
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
 
     <script>
         async function fetchContributors() {
@@ -128,5 +165,21 @@ <h3>${contributor.login}</h3>
 
         fetchContributors();
     </script>
+    <script>
+        let lastScrollPercentage = 0; 
+
+        function updateProgressBar() {
+            const scrollTop = window.scrollY;
+            const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
+            const scrollPercentage = (scrollTop / windowHeight) * 100;
+
+            const progressBar = document.getElementById('progress-bar');
+
+            lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1;
+            progressBar.style.width = lastScrollPercentage + '%'; 
+        }
+
+        window.addEventListener('scroll', updateProgressBar);
+    </script>
 </body>
 </html>