mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 19:22:52 +02:00
110 lines
2.9 KiB
Text
110 lines
2.9 KiB
Text
<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>
|