perf: mobile scrollbar

docs/.vitepress/components/BodyScrollbar.vue

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

docs/.vitepress/theme/index.ts

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