feat: 스크롤바 커스텀

GlowTales · Aug 27, 2024 · d8e3807 · d8e3807
1 parent 786d610
commit d8e3807
Showing 1 changed file with 23 additions and 6 deletions.
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -16,18 +16,12 @@ html {
   justify-content: center;
   font-family: "NanumSquareRound", sans-serif;
 }
-
-html::-webkit-scrollbar {
-  display: none;
-}
-
 body {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   min-height: 99vh;
-  /* 화면 스크롤 방지를 위해 최소높이 지정 */
   margin: 0;
   padding: 0;
   background-color: white;
@@ -38,6 +32,29 @@ body {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  overflow-y: scroll; /* 세로 스크롤 활성화 */
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: #ffd600 #f0f0f0; /* Firefox */
+}
+
+body::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+body::-webkit-scrollbar-track {
+  background-color: #f0f0f0;
+  border-radius: 10px;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #ffd600;
+  border-radius: 10px;
+  border: 3px solid #f0f0f0;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+  background-color: #ffc107;
 }
 
 #root {