Austin/docs
1
0
Fork 0
mirror of https://github.com/gkd-kit/docs.git synced 2024-12-27 16:35:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: mobile scrollbar

Browse Source
This commit is contained in:
二刺螈 2024-11-26 15:23:32 +08:00
parent 120ca51aac
commit 2b12587263
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/.vitepress/components/BodyScrollbar.vue
View File

@ -4,21 +4,9 @@ import {
useEventListener, useEventListener,
useWindowScroll, useWindowScroll,
useWindowSize, useWindowSize,
useStyleTag,
} from '@vueuse/core'; } from '@vueuse/core';
import { computed, onMounted, shallowRef, type CSSProperties } from 'vue'; import { computed, onMounted, shallowRef, type CSSProperties } from 'vue';
useStyleTag(
`
body::-webkit-scrollbar {
display: none;
}
html {
scrollbar-width: none;
}
`.trim(),
);
const { y, x } = useWindowScroll(); const { y, x } = useWindowScroll();
const { height: winH, width: winW } = useWindowSize(); const { height: winH, width: winW } = useWindowSize();
const bodyRef = shallowRef<HTMLElement>(); // support ssr const bodyRef = shallowRef<HTMLElement>(); // support ssr
@ -180,3 +168,11 @@ useEventListener('selectstart', (e) => {
</div> </div>
</div> </div>
</template> </template>
<style>
body:not(.mobile):-webkit-scrollbar {
display: none;
}
html:not(.mobile) {
scrollbar-width: none;
}
</style>

4
docs/.vitepress/theme/index.ts
View File

@ -45,6 +45,10 @@ const ScrollbarWrapper = defineComponent(() => {
onMounted(() => { onMounted(() => {
const isMobile = 'ontouchstart' in document.documentElement; const isMobile = 'ontouchstart' in document.documentElement;
show.value = !isMobile; show.value = !isMobile;
if (isMobile) {
document.body.classList.add('mobile');
document.documentElement.classList.add('mobile');
}
}); });
return () => { return () => {
return show.value return show.value