Skip to content

Commit 6dfd7bb

Browse files
baka-gourdbaka-gourd
committed
feat(site): add overlayscrollbars and bump deps
1 parent 0504d93 commit 6dfd7bb

File tree

4 files changed

+445
-325
lines changed

4 files changed

+445
-325
lines changed

‎docs/.vitepress/theme/index.ts‎

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// https://vitepress.dev/guide/custom-theme
2-
import { render, h } from "vue";
2+
import { render, h, onMounted } from "vue";
33
import type { Theme } from "vitepress";
44
import DefaultTheme from "vitepress/theme";
55
import BackToTop from "../../../components/internal/BackToTop.vue";
@@ -24,6 +24,10 @@ import "@nolebase/vitepress-plugin-inline-link-preview/client/style.css";
2424
import "@nolebase/vitepress-plugin-highlight-targeted-heading/client/style.css";
2525
import "@nolebase/vitepress-plugin-enhanced-mark/client/style.css";
2626

27+
import { OverlayScrollbars } from "overlayscrollbars";
28+
import "overlayscrollbars/overlayscrollbars.css";
29+
import "./overlayscrollbars.css";
30+
2731
function addBackTotop() {
2832
render(
2933
h(BackToTop, {
@@ -33,6 +37,78 @@ function addBackTotop() {
3337
);
3438
}
3539

40+
function initCustomScrollbar() {
41+
const bodyElement = document.querySelector("body");
42+
if (!bodyElement) return;
43+
44+
OverlayScrollbars(
45+
{ target: bodyElement, cancel: { nativeScrollbarsOverlaid: true } },
46+
{
47+
scrollbars: {
48+
theme: "os-theme-dark",
49+
autoHide: "move",
50+
autoHideDelay: 500,
51+
autoHideSuspend: false,
52+
},
53+
},
54+
);
55+
56+
const markInitialized = (el: HTMLElement) =>
57+
el.setAttribute("data-scrollbar-initialized", "true");
58+
const isInitialized = (el: Element) =>
59+
(el as HTMLElement).hasAttribute("data-scrollbar-initialized");
60+
61+
const initOnElement = (el: HTMLElement) => {
62+
if (isInitialized(el)) return;
63+
64+
if (el.classList.contains("VPSidebar")) {
65+
OverlayScrollbars(
66+
{ target: el, cancel: { nativeScrollbarsOverlaid: true } },
67+
{
68+
scrollbars: {
69+
theme: "os-theme-dark",
70+
autoHide: "leave",
71+
autoHideDelay: 500,
72+
autoHideSuspend: false,
73+
},
74+
},
75+
);
76+
markInitialized(el);
77+
}
78+
};
79+
80+
const observer = new IntersectionObserver(
81+
(entries, obs) => {
82+
entries.forEach((entry) => {
83+
if (entry.isIntersecting) {
84+
initOnElement(entry.target as HTMLElement);
85+
obs.unobserve(entry.target);
86+
}
87+
});
88+
},
89+
{ root: null, rootMargin: "100px", threshold: 0.1 },
90+
);
91+
92+
document
93+
.querySelectorAll<HTMLElement>(".VPSidebar")
94+
.forEach((el) => observer.observe(el));
95+
96+
const mo = new MutationObserver((mutations) => {
97+
for (const m of mutations) {
98+
m.addedNodes.forEach((n) => {
99+
if (!(n instanceof HTMLElement)) return;
100+
if (n.matches(".VPSidebar") && !isInitialized(n)) {
101+
observer.observe(n);
102+
}
103+
n.querySelectorAll<HTMLElement>(".VPSidebar").forEach((el) => {
104+
if (!isInitialized(el)) observer.observe(el);
105+
});
106+
});
107+
}
108+
});
109+
mo.observe(document.documentElement, { childList: true, subtree: true });
110+
}
111+
36112
function addDetailsAnimation() {
37113
document
38114
.querySelectorAll("details")
@@ -42,6 +118,9 @@ function addDetailsAnimation() {
42118
export default {
43119
extends: DefaultTheme,
44120
Layout: () => {
121+
onMounted(() => {
122+
initCustomScrollbar();
123+
});
45124
return h(DefaultTheme.Layout, null, {
46125
// https://vitepress.dev/guide/extending-default-theme#layout-slots
47126
"nav-bar-content-after": () => h(NolebaseEnhancedReadabilitiesMenu),

‎docs/.vitepress/theme/overlayscrollbars.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.os-scrollbar.os-theme-dark {
2+
--os-handle-bg: rgba(255, 255, 255, 0.4);
3+
--os-handle-bg-hover: rgba(255, 255, 255, 0.6);
4+
--os-handle-bg-active: rgba(255, 255, 255, 0.8);
5+
}
6+
7+
html:not(.dark) .os-scrollbar.os-theme-dark {
8+
--os-handle-bg: rgba(0, 0, 0, 0.4);
9+
--os-handle-bg-hover: rgba(0, 0, 0, 0.6);
10+
--os-handle-bg-active: rgba(0, 0, 0, 0.8);
11+
}
12+
13+
.os-scrollbar-horizontal .os-scrollbar-handle {
14+
height: 4px;
15+
border-radius: 9999px;
16+
}
17+
.os-scrollbar-horizontal:hover .os-scrollbar-handle {
18+
height: 6px;
19+
}
20+
.os-scrollbar-vertical .os-scrollbar-handle {
21+
width: 4px;
22+
border-radius: 9999px;
23+
}
24+
.os-scrollbar-vertical:hover .os-scrollbar-handle {
25+
width: 6px;
26+
}

‎package.json‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,29 @@
1111
"author": "",
1212
"license": "All right reserved.",
1313
"devDependencies": {
14-
"@nolebase/vitepress-plugin-enhanced-mark": "^2.18.0",
15-
"@nolebase/vitepress-plugin-enhanced-readabilities": "^2.18.0",
16-
"@nolebase/vitepress-plugin-git-changelog": "^2.18.0",
17-
"@nolebase/vitepress-plugin-highlight-targeted-heading": "^2.18.0",
18-
"@nolebase/vitepress-plugin-inline-link-preview": "^2.18.0",
19-
"@nolebase/vitepress-plugin-meta": "^2.18.0",
20-
"@nolebase/vitepress-plugin-page-properties": "^2.18.0",
21-
"@types/node": "^20.19.4",
22-
"@typescript-eslint/parser": "^8.35.1",
23-
"@vue/tsconfig": "^0.7.0",
14+
"@nolebase/vitepress-plugin-enhanced-mark": "^2.18.2",
15+
"@nolebase/vitepress-plugin-enhanced-readabilities": "^2.18.2",
16+
"@nolebase/vitepress-plugin-git-changelog": "^2.18.2",
17+
"@nolebase/vitepress-plugin-highlight-targeted-heading": "^2.18.2",
18+
"@nolebase/vitepress-plugin-inline-link-preview": "^2.18.2",
19+
"@nolebase/vitepress-plugin-meta": "^2.18.2",
20+
"@nolebase/vitepress-plugin-page-properties": "^2.18.2",
21+
"@types/node": "^20.19.17",
22+
"@typescript-eslint/parser": "^8.44.0",
23+
"@vue/tsconfig": "^0.8.1",
2424
"markdown-it-mathjax3": "^4.3.2",
2525
"prettier": "3.2.5",
26-
"taze": "^19.1.0",
26+
"taze": "^19.7.0",
2727
"vitepress": "1.6.3",
28-
"vitepress-sidebar": "^1.31.1",
28+
"vitepress-sidebar": "^1.33.0",
2929
"vue-eslint-parser": "^10.2.0"
3030
},
3131
"dependencies": {
32-
"@formkit/auto-animate": "^0.8.2",
33-
"@vueuse/core": "^13.5.0",
34-
"cross-env": "^7.0.3",
35-
"vue": "^3.5.17"
32+
"@formkit/auto-animate": "^0.9.0",
33+
"@vueuse/core": "^13.9.0",
34+
"cross-env": "^10.0.0",
35+
"overlayscrollbars": "^2.12.0",
36+
"vue": "^3.5.21"
3637
},
3738
"pnpm": {
3839
"onlyBuiltDependencies": [

0 commit comments

Comments
 (0)