reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-15 11:12:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add auto-hide native scrollbar and optimize scrollbar styling

Browse source
This commit is contained in:
radishzzz 2025-05-14 19:01:54 +01:00
parent 41fca8569e
commit 168e231119
7 changed files with 82 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/Widgets/Scrollbar.astro Normal file
View file

@ -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>

19
src/components/Widgets/TOC.astro
View file

@ -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>

6
src/layouts/Layout.astro
View file

@ -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>

4
src/pages/404.astro
View file

@ -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>

2
src/styles/extend.css
View file

@ -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,

20
src/styles/global.css
View file

@ -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,

9
src/styles/heti.css
View file

@ -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';
}