style: optimize scrollbar styling, remove the auto-hide feature to fix page flickering issue

This commit is contained in:
radishzzz 2025-05-15 17:27:17 +01:00
parent bd24e340e7
commit d0e699d8cb
5 changed files with 10 additions and 54 deletions

View file

@ -1,34 +0,0 @@
<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 html = document.documentElement
html.classList.remove('scrolling')
if (scrollHandler) {
window.removeEventListener('scroll', scrollHandler)
}
const hideScrollbar = debounce(() => {
html.classList.remove('scrolling')
}, 1500)
scrollHandler = () => {
html.classList.add('scrolling')
hideScrollbar()
}
window.addEventListener('scroll', scrollHandler, { passive: true })
}
initScrollbar()
document.addEventListener('astro:page-load', initScrollbar)
</script>

View file

@ -19,14 +19,14 @@ const filteredHeadings = headings.filter(heading =>
---
{filteredHeadings.length > 0 && (
<div class="mb-4 uno-round-border bg-secondary/5 2xl:(fixed left-0 top-43.5 max-w-[min(calc(50vw-38rem),13rem)] border-none bg-transparent)">
<div class="mb-4 uno-round-border bg-secondary/5 2xl:(fixed left-0 top-43.5 max-w-[min(calc(50vw-38rem),13rem)] border-none bg-secondary/0)">
<input
type="checkbox"
id="toc-toggle"
class="accordion-toggle"
hidden
/>
<div class="relative h-12 w-full bg-transparent">
<div class="relative h-12 w-full">
<label
for="toc-toggle"
class="absolute inset-0 flex cursor-pointer items-center 2xl:(static flex c-secondary/40 transition-colors ease-out hover:c-secondary/80)"