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

feat: add overlay scrollbar for body and code block

Browse source
This commit is contained in:
radishzzz 2025-03-27 05:00:22 +00:00
parent bc20bcc211
commit 743d17639d
6 changed files with 92 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,59 +1,83 @@
<script>
import { OverlayScrollbars } from 'overlayscrollbars'
function initScrollbar() {
function setupScrollbar() {
const bodyElement = document.body
const scrollbarTheme = document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light'
if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
OverlayScrollbars({
target: bodyElement,
cancel: {
// don't initialize the overlay scrollbar if there is a native one
nativeScrollbarsOverlaid: true,
},
}, {
scrollbars: {
theme: scrollbarTheme,
theme: 'scrollbar-body',
autoHide: 'scroll',
autoHideDelay: 800,
},
overflow: {
x: 'hidden',
},
})
bodyElement.setAttribute('data-scrollbar-initialized', 'true')
}
const preElements = document.querySelectorAll('pre')
preElements.forEach((pre) => {
if (!pre.hasAttribute('data-scrollbar-initialized')) {
OverlayScrollbars({
target: pre,
cancel: {
nativeScrollbarsOverlaid: true,
},
}, {
scrollbars: {
theme: 'scrollbar-code',
autoHide: 'leave',
autoHideDelay: 500,
},
})
pre.setAttribute('data-scrollbar-initialized', 'true')
}
})
}
initScrollbar()
document.addEventListener('astro:after-swap', initScrollbar)
setupScrollbar()
document.addEventListener('astro:after-swap', setupScrollbar)
</script>
<style is:global>
@import 'overlayscrollbars/overlayscrollbars.css';
.scrollbar-light,
.scrollbar-dark {
--os-size: 1rem;
.scrollbar-body {
--os-size: 0.9rem;
--os-padding-perpendicular: 0.2rem;
--os-padding-axis: 0.4rem;
--os-handle-border-radius: 0.7rem;
--os-handle-perpendicular-size-hover: 160%;
--os-handle-perpendicular-size-active: 160%;
--os-handle-interactive-area-offset: 3px;
--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: 60%;
--os-handle-min-size: 12%;
}
.scrollbar-light {
--os-handle-bg: #CFC5BD;
--os-handle-bg-hover: #ADA49E;
--os-handle-bg-active: #ADA49E;
}
.scrollbar-dark {
--os-handle-bg: #2C2C2C;
--os-handle-bg-hover: #3C3C3C;
--os-handle-bg-active: #3C3C3C;
.scrollbar-code {
--os-size: 0.6rem;
--os-padding-perpendicular: 0.1rem;
--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.1rem;
--os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.20);
--os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.35);
--os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.35);
--os-handle-max-size: 60%;
--os-handle-min-size: 12%;
}
@media (max-width: 1023px) {