reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-17 03:56:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf: remove overlayscrollbars to fix page loading lag, update heading margins

Browse source
This commit is contained in:
radishzzz 2025-05-14 15:25:27 +01:00
parent c2547dd65d
commit 41fca8569e
11 changed files with 124 additions and 241 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/components/Widgets/Scrollbar.astro
View file

@ -1,110 +0,0 @@
<script>
import { OverlayScrollbars } from 'overlayscrollbars'
function setupScrollbar() {
// Add scrollbar to body
const bodyElement = document.body
if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
OverlayScrollbars({
target: bodyElement,
cancel: {
nativeScrollbarsOverlaid: true,
},
}, {
scrollbars: {
theme: 'scrollbar-body',
autoHide: 'scroll',
autoHideDelay: 800,
},
overflow: {
x: 'hidden',
},
})
bodyElement.setAttribute('data-scrollbar-initialized', 'true')
}
// Add scrollbar to TOC content
const tocElement = document.getElementById('toc-content')
if (tocElement && !tocElement.hasAttribute('data-scrollbar-initialized')) {
OverlayScrollbars({
target: tocElement,
}, {
scrollbars: {
theme: 'scrollbar-widget',
autoHide: 'never',
},
overflow: {
x: 'hidden',
},
})
tocElement.setAttribute('data-scrollbar-initialized', 'true')
}
// Add scrollbar to code blocks
const preElements = document.querySelectorAll('pre')
preElements.forEach((pre) => {
if (!pre.hasAttribute('data-scrollbar-initialized')) {
OverlayScrollbars({
target: pre,
}, {
scrollbars: {
theme: 'scrollbar-widget',
autoHide: 'leave',
autoHideDelay: 500,
},
overflow: {
y: 'hidden',
},
})
pre.setAttribute('data-scrollbar-initialized', 'true')
}
})
}
setupScrollbar()
document.addEventListener('astro:after-swap', setupScrollbar)
</script>
<style is:global>
@import 'overlayscrollbars/overlayscrollbars.css';
.scrollbar-body {
--os-size: 0.8rem;
--os-padding-perpendicular: 0.15rem;
--os-padding-axis: 0.2rem;
--os-handle-border-radius: 99rem;
--os-handle-perpendicular-size: 75%;
--os-handle-perpendicular-size-hover: 100%;
--os-handle-perpendicular-size-active: 100%;
--os-handle-interactive-area-offset: 0.2rem;
--os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.25);
--os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.40);
--os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.40);
--os-handle-max-size: 80%;
--os-handle-min-size: 12%;
}
.scrollbar-widget {
--os-size: 0.4rem;
--os-padding-perpendicular: 0;
--os-padding-axis: 0.05rem;
--os-handle-border-radius: 99rem;
--os-handle-perpendicular-size: 75%;
--os-handle-perpendicular-size-hover: 100%;
--os-handle-perpendicular-size-active: 100%;
--os-handle-interactive-area-offset: 0.2rem;
--os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.15);
--os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.30);
--os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.30);
--os-handle-min-size: 12%;
}
@media (min-width: 1536px) {
#toc-content .os-scrollbar {
--at-apply: 'hidden';
}
}
</style>