feat: overlay scrollbar

package.json

@@ -19,6 +19,7 @@
     "astro-icon": "1.0.0-next.2",
     "colorjs.io": "^0.4.5",
     "mdast-util-to-string": "^4.0.0",
+    "overlayscrollbars": "^2.4.4",
     "reading-time": "^1.5.0",
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ dependencies:
   mdast-util-to-string:
     specifier: ^4.0.0
     version: 4.0.0
+  overlayscrollbars:
+    specifier: ^2.4.4
+    version: 2.4.4
   reading-time:
     specifier: ^1.5.0
     version: 1.5.0
@@ -4285,6 +4288,10 @@ packages:
       lcid: 1.0.0
     dev: false
 
+  /overlayscrollbars@2.4.4:
+    resolution: {integrity: sha512-792lwASLr3FlZER+/P7NseFQjffDEcQOg6HtyBSLrnb3crH+Ybk0tzaljQVQZs0pjGF/xFjyvMKin6whkL0RnQ==}
+    dev: false
+
   /p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}

src/components/GlobalStyles.astro

@@ -95,6 +95,18 @@ color_set({
 
   --float-panel-bg: white oklch(0.19 0.015 var(--hue))
 
+  --scrollbar-bg-light: black(0.4)
+  --scrollbar-bg-hover-light: black(0.5)
+  --scrollbar-bg-active-light: black(0.6)
+
+  --scrollbar-bg-dark: white(0.4)
+  --scrollbar-bg-hover-dark: white(0.5)
+  --scrollbar-bg-active-dark: white(0.6)
+
+  --scrollbar-bg: var(--scrollbar-bg-light) var(--scrollbar-bg-dark)
+  --scrollbar-bg-hover: var(--scrollbar-bg-hover-light) var(--scrollbar-bg-hover-dark)
+  --scrollbar-bg-active: var(--scrollbar-bg-active-light) var(--scrollbar-bg-active-dark)
+
   --color-selection-bar: rainbow-light rainbow-dark
 
   --display-light-icon: 1 0
@@ -106,6 +118,55 @@ color_set({
 ::selection
   background-color: var(--selection-bg)
 
+.scrollbar-base.os-scrollbar
+  transition: width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
+  pointer-events: unset;
+  &.os-scrollbar-horizontal
+    padding-top: 4px;
+    padding-bottom: 4px;
+    height: 16px;
+    .os-scrollbar-track .os-scrollbar-handle
+      height: 4px;
+      border-radius: 4px;
+    &:hover
+      .os-scrollbar-track .os-scrollbar-handle
+        height: 8px;
+    &.px-2
+      padding-left: 8px;
+      padding-right: 8px;
+  &.os-scrollbar-vertical
+    padding-left: 4px;
+    padding-right: 4px;
+    width: 16px;
+    .os-scrollbar-track .os-scrollbar-handle
+      width: 4px;
+      border-radius: 4px;
+    &:hover
+      .os-scrollbar-track .os-scrollbar-handle
+        width: 8px;
+    &.py-1
+      padding-top: 4px;
+      padding-bottom: 4px;
+
+.scrollbar-auto
+  &.os-scrollbar
+    --os-handle-bg: var(--scrollbar-bg);
+    --os-handle-bg-hover: var(--scrollbar-bg-hover);
+    --os-handle-bg-active: var(--scrollbar-bg-active);
+
+.scrollbar-dark
+  &.os-scrollbar
+    --os-handle-bg: var(--scrollbar-bg-dark);
+    --os-handle-bg-hover: var(--scrollbar-bg-hover-dark);
+    --os-handle-bg-active: var(--scrollbar-bg-active-dark);
+
+.scrollbar-light
+  &.os-scrollbar
+    --os-handle-bg: var(--scrollbar-bg-light);
+    --os-handle-bg-hover: var(--scrollbar-bg-hover-light);
+    --os-handle-bg-active: var(--scrollbar-bg-active-light);
+
+
 </style>
 <style is:global>
 @tailwind base;

src/layouts/Layout.astro

@@ -156,7 +156,15 @@ html::view-transition-new(banner-ani) {
 }
 </style>
 <script>
-/* Preload fonts */
+import 'overlayscrollbars/overlayscrollbars.css';
+import {
+	OverlayScrollbars,
+	ScrollbarsHidingPlugin,
+	SizeObserverPlugin,
+	ClickScrollPlugin
+} from 'overlayscrollbars';
+
+	/* Preload fonts */
 // (async function() {
 // 	try {
 // 		await Promise.all([
@@ -270,22 +278,42 @@ function setBannerHeight() {
 	}
 }
 
-/* Load settings when entering the site */
+function initCustomScrollbar() {
-// disableAnimation()()		// TODO
+	OverlayScrollbars(document.querySelector('body'), {
-setBannerHeight();
+		scrollbars: {
-loadTheme();
+			theme: 'scrollbar-base scrollbar-auto py-1',
-loadHue();
+			autoHide: 'move',
-activateDisplaySettings();
+			autoHideDelay: 1300,
+			autoHideSuspend: false
+		}
+	});
+	document.querySelectorAll('pre').forEach((ele) => {
+		OverlayScrollbars(ele, {
+			scrollbars: {
+				theme: 'scrollbar-base scrollbar-dark px-2',
+				autoHide: 'leave',
+				autoHideDelay: 1300,
+				autoHideSuspend: false
+			}
+		});
+	});
+}
 
-/* Load settings before swapping */
+function init() {
-/* astro:after-swap event happened before swap animation */
+	// disableAnimation()()		// TODO
-document.addEventListener('astro:after-swap', () => {
 	setBannerHeight();
 	loadTheme();
 	loadHue();
-	// disableAnimation()();		// TODO
 	activateDisplaySettings();
-});
+	initCustomScrollbar();
+}
+
+/* Load settings when entering the site */
+init();
+
+/* Load settings before swapping */
+/* astro:after-swap event happened before swap animation */
+document.addEventListener('astro:after-swap', init);
 </script>
 
 <style is:global lang="stylus">