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

https://developer.chrome.com/release-notes/144?hl=zh-cn#respect_overscroll-behavior_on_non-scrollable_scroll_containers
This commit is contained in:
Hooray
2026-01-22 22:30:20 +08:00
parent b5832c3256
commit 658b51a747
5 changed files with 5 additions and 5 deletions
+1 -1
View File
@@ -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">
+1 -1
View File
@@ -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">
+1 -1
View File
@@ -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)">
+1 -1
View File
@@ -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">
@@ -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 }" />