💄 Add custom scrollbar style

Display scrollbar all the time and modify scrollbar style. This is to avoid layout shift on different page length _ especially on Search page.
satnaing · Nov 6, 2022 · 1f53cfa · 1f53cfa · vercel · Nov 6, 2022
1 parent 1897260
commit 1f53cfa
Showing 1 changed file with 22 additions and 1 deletion.
diff --git a/styles/globals.css b/styles/globals.css
@@ -4,12 +4,33 @@
 
 @layer base {
   html {
-    @apply scroll-smooth;
+    @apply scroll-smooth overflow-y-scroll;
   }
 
   body {
     @apply font-sans;
   }
+
+  /* ===== Custom Scrollbar ===== */
+  /* width */
+  ::-webkit-scrollbar {
+    @apply w-3;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    @apply bg-bglight dark:bg-bgdark;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    @apply bg-[#d5d5d5] dark:bg-carddark;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-[#b7b7b7] dark:bg-[#17222b];
+  }
 }
 
 @layer components {