Merge pull request #126 from Harshil-Gupta21/main

Toggle Scroll Bar

index.html

@@ -29,6 +29,7 @@
     <link rel="stylesheet" href="styles.css" />
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
+    <link rel="icon" href="assets/head_icon.png" />
     <title>Portfolio Website</title>
   </head>
 

script.js

@@ -234,3 +234,37 @@ window.onload = function () {
   css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
   document.body.appendChild(css);
 };
+
+// ----------Toggle Scroll Bar ------------
+
+window.addEventListener("scroll", () => {
+  showScroll();
+});
+
+const onScrollStop = (showScroll) => {
+  let scrolling;
+  window.addEventListener(
+    "scroll",
+    () => {
+      clearTimeout(scrolling);
+      scrolling = setTimeout(() => {
+        showScroll();
+      }, 500);
+    },
+    false
+  );
+};
+
+onScrollStop(() => {
+  hideScroll();
+});
+
+function showScroll() {
+  let doc = document.querySelector("body");
+  doc.classList.remove("hide-scroll");
+}
+
+function hideScroll() {
+  let doc = document.querySelector("body");
+  doc.classList.add("hide-scroll");
+}

styles.css

@@ -824,34 +824,6 @@ details:has(input:checked) label::before {
   flex-wrap: wrap;
 }
 
-.scroll-up-btn {
-  position: fixed;
-  height: 45px;
-  width: 42px;
-  background: #2980b9;
-  right: 30px;
-  bottom: 10px;
-  text-align: center;
-  line-height: 45px;
-  color: #fff;
-  z-index: 9999;
-  font-size: 30px;
-  border-radius: 6px;
-  border-bottom-width: 2px;
-  cursor: pointer;
-  opacity: 0;
-  pointer-events: none;
-  transition: all 0.3s ease;
-}
-.scroll-up-btn.show {
-  bottom: 30px;
-  opacity: 1;
-  pointer-events: auto;
-}
-.scroll-up-btn:hover {
-  filter: brightness(90%);
-}
-
 .scroll-up-btn {
   position: fixed;
   height: 45px;
@@ -1176,7 +1148,7 @@ h2 {
 /* -------------Testimonials Ends---------- */
 
 ::-webkit-scrollbar {
-  width: 12px;
+  width: 8px;
 }
 
 ::-webkit-scrollbar:hover {
@@ -1185,7 +1157,11 @@ h2 {
 
 ::-webkit-scrollbar-thumb {
   background-color: #3498db;
-  border-radius: 6px;
+  border-radius: 4px;
+}
+
+.hide-scroll::-webkit-scrollbar-thumb {
+  display: none;
 }
 
 /* contact-item */