From fae56448fb2b4ae03adfa8c8a176fbbab7875361 Mon Sep 17 00:00:00 2001
From: holybaechu <joonhoo0524@naver.com>
Date: Tue, 27 Feb 2024 21:22:25 +0900
Subject: [PATCH] Custom scrollbar

---
 src/app.css               | 17 ++++++++++++++++-
 src/routes/+layout.svelte |  2 +-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index bd6213e..4466bd8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@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);
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 09de997..74b0b4b 100644
--- 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>