mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-17 03:56:19 +02:00
style: optimize scrollbar styling, remove the auto-hide feature to fix page flickering issue
This commit is contained in:
parent
bd24e340e7
commit
d0e699d8cb
5 changed files with 10 additions and 54 deletions
|
@ -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>
|
|
@ -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)"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue