Merge pull request #274 from SohanRC/main

Add a Custom Scrollbar
apu52 · Feb 14, 2024 · c19c2a9 · c19c2a9
2 parents 9b0fef6 + 19104b7
commit c19c2a9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -63,6 +63,8 @@ <h1>TourGuide . . .</h1>
       <canvas></canvas>
       <canvas></canvas>
     </div>
+    <div id="progressbar"></div>
+    <div id="scrollPath"></div>
     <!-- <canvas id="canvas"></canvas> -->
     <!-- <nav>
 
@@ -1042,6 +1044,18 @@ <h4>Reach Out To Us</h4>
       })
     </script>
 
+    <script>
+
+      let progress = document.getElementById("progressbar");
+
+      let totalHeight = document.body.scrollHeight - window.innerHeight;
+      window.onscroll = function () {
+        let progressHeight = (window.pageYOffset / totalHeight) * 100;
+        progress.style.height = progressHeight + "%";
+      }
+
+    </script>
+
 
   </body>
   <script>

diff --git a/styles.css b/styles.css
@@ -23,6 +23,29 @@
   box-sizing: border-box;
 }
 
+::-webkit-scrollbar {
+  width: 0;
+}
+
+#scrollPath {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 15px;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+#progressbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 15px;
+  height: 100%;
+  background: linear-gradient(to top , #008aff , #00ffe7);
+  z-index: 333333;
+}
+
 .dark-theme {
   --secondary-color: #0e1525;
   --text-dark: #ffffff;