customize scrollbar like macOS

spencer-rafada · Aug 3, 2023 · 4cbe0ec · 4cbe0ec
1 parent 5518b4d
commit 4cbe0ec
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 11 deletions.
diff --git a/src/main.css b/src/main.css
@@ -1,4 +1,36 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
+/* total width */
+.scrollbar::-webkit-scrollbar {
+  background-color: #fff;
+  width: 16px;
+}
+
+/* background of the scrollbar except button or resizer */
+.scrollbar::-webkit-scrollbar-track {
+  background-color: #070a13;
+}
+
+.scrollbar::-webkit-scrollbar-track:hover {
+  background-color: #062c47;
+}
+
+/* scrollbar itself */
+.scrollbar::-webkit-scrollbar-thumb {
+  background-color: #babac0;
+  border-radius: 16px;
+  border: 5px solid #070a13;
+}
+
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: #2659f2;
+  border: 4px solid #062c47;
+}
+
+/* set button(top and bottom of the scrollbar) */
+.scrollbar::-webkit-scrollbar-button {
+  display: none;
+}
+
 @keyframes hoverAnimation {
   0% {
     transform: scale(1);
@@ -28,16 +60,14 @@
 main {
   font-family: "Inter", serif;
   color: #D8E2FD;
-  padding: 2rem;
-}
-@media only screen and (min-width: 40em) {
-  main {
-    padding: 4rem;
-  }
 }
 
+.mainSection {
+  padding: 2rem;
+}
 @media only screen and (min-width: 40em) {
   .mainSection {
+    padding: 4rem;
     height: calc(100vh - 8rem);
   }
 }

diff --git a/src/main.css.map b/src/main.css.map
diff --git a/src/main.scss b/src/main.scss
@@ -14,6 +14,35 @@ $mediumScreen: 48em;
 $largeScreen: 64em;
 $extraLargeScreen: 80em;
 
+// Scrollbar
+/* total width */
+.scrollbar::-webkit-scrollbar {
+  background-color:#fff;
+  width:16px
+}
+
+/* background of the scrollbar except button or resizer */
+.scrollbar::-webkit-scrollbar-track {
+  background-color:$backgroundColor;
+}
+.scrollbar::-webkit-scrollbar-track:hover {
+  background-color:$secondaryColor;
+}
+
+/* scrollbar itself */
+.scrollbar::-webkit-scrollbar-thumb {
+  background-color:#babac0;
+  border-radius:16px;
+  border:5px solid $backgroundColor
+}
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: $accentColor;
+  border:4px solid $secondaryColor;
+}
+
+/* set button(top and bottom of the scrollbar) */
+.scrollbar::-webkit-scrollbar-button {display:none}
+
 // Animations
 @keyframes hoverAnimation {
   0% {
@@ -47,14 +76,12 @@ main {
   font-family: 'Inter', serif;
   // background-color: $backgroundColor;
   color: $textColor;
-  padding: 2rem;
-  @media only screen and (min-width: $smallScreen) {
-    padding: 4rem;
-  }
 }
 
 .mainSection {
+  padding: 2rem;
   @media only screen and (min-width: $smallScreen) {
+    padding: 4rem;
     height: calc(100vh - 4rem * 2);
   }
 }