Custom scrollbar

RappyBots · Feb 27, 2024 · fae5644 · fae5644
1 parent c02c22e
commit fae5644
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* Tailwind doesn't support -webkit-scrollbar selectors :pepoSadge: */
+body::-webkit-scrollbar {
+    background-color: transparent;
+    width: 5.5px;
+}
+
+body::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.4);
+    border-radius: 10px;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.6);
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
 <div>
 	<Header />
 
-	<main class="min-h-screen overflow-scroll scrollbar">
+	<main class="min-h-screen">
 		<slot />
 	</main>