From 168e231119fb81b929fe12ee31c5ab0d90e63383 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Wed, 14 May 2025 19:01:54 +0100
Subject: [PATCH] feat: add auto-hide native scrollbar and optimize scrollbar
 styling

---
 src/components/Widgets/Scrollbar.astro | 34 ++++++++++++++++++++++++++
 src/components/Widgets/TOC.astro       | 19 ++++++++++++--
 src/layouts/Layout.astro               |  6 ++---
 src/pages/404.astro                    |  4 +--
 src/styles/extend.css                  |  2 +-
 src/styles/global.css                  | 20 ++++++++++++---
 src/styles/heti.css                    |  9 +++++++
 7 files changed, 82 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Widgets/Scrollbar.astro

diff --git a/src/components/Widgets/Scrollbar.astro b/src/components/Widgets/Scrollbar.astro
new file mode 100644
index 0000000..a8894ca
--- /dev/null
+++ b/src/components/Widgets/Scrollbar.astro
@@ -0,0 +1,34 @@
+<script>
+let scrollHandler: EventListener | undefined
+
+function debounce(fn: () => void, delay: number) {
+  let timer: ReturnType<typeof setTimeout> | undefined
+  return function () {
+    clearTimeout(timer)
+    timer = setTimeout(fn, delay)
+  }
+}
+
+function initScrollbar() {
+  const body = document.body
+  body.classList.remove('scrolling')
+
+  if (scrollHandler) {
+    window.removeEventListener('scroll', scrollHandler)
+  }
+
+  const hideScrollbar = debounce(() => {
+    body.classList.remove('scrolling')
+  }, 1200)
+
+  scrollHandler = () => {
+    body.classList.add('scrolling')
+    hideScrollbar()
+  }
+
+  window.addEventListener('scroll', scrollHandler, { passive: true })
+}
+
+initScrollbar()
+document.addEventListener('astro:page-load', initScrollbar)
+</script>
\ No newline at end of file
diff --git a/src/components/Widgets/TOC.astro b/src/components/Widgets/TOC.astro
index fb8110d..557f31d 100644
--- a/src/components/Widgets/TOC.astro
+++ b/src/components/Widgets/TOC.astro
@@ -37,7 +37,7 @@ const filteredHeadings = headings.filter(heading =>
 
         <TocIcon
           aria-hidden="true"
-          class="ml-4 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)"
+          class="ml-2 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)"
           fill="currentColor"
         />
       </label>
@@ -94,7 +94,7 @@ const filteredHeadings = headings.filter(heading =>
   --at-apply: 'grid rows-[0fr] duration-300 ease-in-out';
 }
 .accordion-content {
-  --at-apply: 'overflow-hidden max-h-66 2xl:(max-h-[calc(100vh-21.5rem)]) pl-4 pr-6';
+  --at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-21.5rem)] pl-2)';
 }
 
 /* When toggle is checked, expand the wrapper to show content */
@@ -104,6 +104,15 @@ const filteredHeadings = headings.filter(heading =>
 .accordion-toggle:checked ~ .accordion-wrapper .accordion-content {
   --at-apply: 'overflow-y-auto';
 }
+#toc-content::-webkit-scrollbar {
+  --at-apply: 'w-1.25 lg:w-1.5';
+}
+#toc-content::-webkit-scrollbar-thumb {
+  --at-apply: 'rounded-full bg-secondary/15';
+}
+#toc-content::-webkit-scrollbar-thumb:hover {
+  --at-apply: 'bg-secondary/25';
+}
 
 @media (min-width: 1536px) {
   .accordion-wrapper {
@@ -121,6 +130,12 @@ const filteredHeadings = headings.filter(heading =>
   .toc-link-active {
     --at-apply: 'c-secondary font-medium';
   }
+  #toc-content {
+    --at-apply: 'scrollbar-hidden';
+  }
+  #toc-content::-webkit-scrollbar {
+    display: none;
+  }
 }
 </style>
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 48337a3..e81796d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -5,6 +5,7 @@ import Header from '@/components/Header.astro'
 import Navbar from '@/components/Navbar.astro'
 import GithubCard from '@/components/Widgets/GithubCard.astro'
 import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
+import Scrollbar from '@/components/Widgets/Scrollbar.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
 import { getPageInfo } from '@/utils/page'
@@ -31,11 +32,9 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
 <html
   lang={Astro.currentLocale}
   class:list={[fontStyle, { 'scroll-smooth': isPost }]}
-  data-overlayscrollbars-initialize
 >
   <Head {postTitle} {postDescription} {postSlug} />
-  <body data-overlayscrollbars-initialize>
-
+  <body>
     <div
       class="mx-auto max-w-205.848 min-h-vh w-full min-h-dvh"
       p="x-[min(7.25vw,3.731rem)] y-9"
@@ -49,6 +48,7 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
       <Footer />
     </div>
     <Button supportedLangs={supportedLangs} />
+    <Scrollbar />
     <GithubCard />
     <PhotoSwipe />
   </body>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 52e373b..2da525f 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -6,8 +6,8 @@ import Layout from '@/layouts/Layout.astro'
   <!-- Decorative Line -->
   <div class="uno-decorative-line"></div>
   <!-- Page Not Found -->
-  <h3 class="mt--1.3 text-8 text-primary font-bold leading-1.2em font-navbar lg:text-9">PAGE<br >NOT<br >FOUND</h3>
-  <p class="mt-3.6 text-3.6 leading-1.4em font-navbar lg:(mt-4 text-4)">It looks like the page you're looking for<br >does not exist or has been moved.</p>
+  <h3 class="mt--1.3 text-8 text-primary font-bold leading-1.2em font-navbar lg:text-9">PAGE<br>NOT<br>FOUND</h3>
+  <p class="mt-3.6 text-3.6 leading-1.4em font-navbar lg:(mt-4 text-4)">It looks like the page you're looking for<br>does not exist or has been moved.</p>
   <!-- Unused Div -->
   <div class=""></div>
 </Layout>
diff --git a/src/styles/extend.css b/src/styles/extend.css
index f6c1526..3fe2ed1 100644
--- a/src/styles/extend.css
+++ b/src/styles/extend.css
@@ -8,7 +8,7 @@
 
 /* Heading Anchor Link */
 .heading-anchor-link {
-  --at-apply: 'inline-block translate-y-0.08em c-secondary/0';
+  --at-apply: 'inline-block translate-y-0.08em c-transparent';
 }
 h1:hover .heading-anchor-link,
 h2:hover .heading-anchor-link,
diff --git a/src/styles/global.css b/src/styles/global.css
index c176118..414f4c1 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5,16 +5,28 @@
 }
 html {
   --at-apply: 'bg-background c-secondary antialiased';
+  scrollbar-gutter: stable both-edges;
 }
-::selection {
-  --at-apply: 'bg-mark';
-}
-
 /* Fix Flash Issue On iOS */
 body {
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
+body::selection {
+  --at-apply: 'bg-mark';
+}
+body::-webkit-scrollbar {
+  --at-apply: 'w-1.75';
+}
+body::-webkit-scrollbar-thumb {
+  --at-apply: 'rounded-full bg-transparent';
+}
+body.scrolling::-webkit-scrollbar-thumb {
+  --at-apply: 'bg-secondary/25';
+}
+body::-webkit-scrollbar-thumb:hover {
+  --at-apply: 'bg-secondary/40';
+}
 
 /* Highlight Hover Animation */
 .highlight-static,
diff --git a/src/styles/heti.css b/src/styles/heti.css
index c791522..b800a6d 100644
--- a/src/styles/heti.css
+++ b/src/styles/heti.css
@@ -83,6 +83,15 @@
 .heti :where(pre) {
   --at-apply: 'mb-4 overflow-auto uno-round-border px-4 py-3 bg-secondary/5!';
 }
+.heti pre::-webkit-scrollbar {
+  --at-apply: 'h-1.25 lg:h-1.5';
+}
+.heti pre::-webkit-scrollbar-thumb {
+  --at-apply: 'rounded-full bg-secondary/15';
+}
+.heti pre::-webkit-scrollbar-thumb:hover {
+  --at-apply: 'bg-secondary/25';
+}
 .heti pre :where(code) {
   --at-apply: 'border-none bg-transparent p-0';
 }