fix: 修复 overscroll-behavior 属性行为在 chrome 144 变更引起的 bug

https://developer.chrome.com/release-notes/144?hl=zh-cn#respect_overscroll-behavior_on_non-scrollable_scroll_containers

Author: hooray

src/layouts/components/Header/index.vue

@@ -19,7 +19,7 @@ const { switchTo } = useMenu()
         <component :is="useSlots('header-start')" />
         <Logo class="title" />
         <component :is="useSlots('header-after-logo')" />
-        <FaScrollArea :scrollbar="false" mask horizontal gradient-color="var(--g-header-bg)" class="menu-container h-full flex-1">
+        <FaScrollArea :scrollbar="false" mask horizontal gradient-color="var(--g-header-bg)" class="menu-container h-full flex-1 overscroll-contain">
           <!-- 顶部模式 -->
           <div class="menu h-full flex of-hidden transition-all">
             <template v-for="(item, index) in menuStore.allMenus" :key="index">

src/layouts/components/MainSidebar/index.vue

@@ -38,7 +38,7 @@ onUnmounted(() => {
       <component :is="useSlots('main-sidebar-top')" />
       <Logo :show-title="false" class="sidebar-logo" />
       <component :is="useSlots('main-sidebar-after-logo')" />
-      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu flex-1">
+      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu flex-1 overscroll-contain">
         <!-- 侧边栏模式（含主导航） -->
         <div class="w-full flex flex-col of-hidden py-1 transition-all -mt-2">
           <template v-for="(item, index) in menuStore.allMenus" :key="index">

src/layouts/components/Menu/sub.vue

@@ -214,7 +214,7 @@ function handleMouseleave() {
           'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
           'border shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
           'mx-1': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
-          'py-1': rootMenu.isMenuPopup,
+          'py-1 overscroll-contain': rootMenu.isMenuPopup,
         })"
       >
         <template v-for="item in menu.children" :key="item.path ?? rootMenu.getUseId(item)">

src/layouts/components/SubSidebar/index.vue

@@ -54,7 +54,7 @@ watch(() => menuStore.actived, (val, oldVal) => {
         }"
       />
       <component :is="useSlots('sub-sidebar-after-logo')" />
-      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-sub-sidebar-bg)" class="flex-1">
+      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-sub-sidebar-bg)" class="flex-1 overscroll-contain">
         <TransitionGroup :name="transitionName">
           <template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
             <div v-show="mainIndex === menuStore.actived">

src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue

@@ -28,7 +28,7 @@ defineExpose({
 
 <template>
   <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
-    <ScrollAreaViewport ref="viewportRef" class="scroll-area-viewport h-full w-full overscroll-contain rounded-[inherit]" @scroll="onScroll" @wheel="onWheel">
+    <ScrollAreaViewport ref="viewportRef" class="scroll-area-viewport h-full w-full rounded-[inherit]" @scroll="onScroll" @wheel="onWheel">
       <slot />
     </ScrollAreaViewport>
     <ScrollBar :class="{ 'opacity-0 pointer-events-none': !props.scrollbar }" />