fix: 修复异常的黑色遮罩 #429

Author: keleus

src/components/HorizontalScrollView.vue

@@ -82,7 +82,7 @@ function handleMouseScroll(event: WheelEvent) {
 
 <style lang="scss" scoped>
 .scroll-mask {
-  mask-image: linear-gradient(to right, transparent 0%, black 40px calc(100% - 40px), transparent 100%);
-  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px calc(100% - 40px), transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
 }
 </style>

src/components/Settings/Settings.vue

@@ -210,11 +210,11 @@ function setCurrentTitle() {
           <!-- Mask -->
           <div
             pos="absolute top-0 left-0" w-inherit h-inherit pointer-events-none
-            style="
-              mask-image: linear-gradient(to bottom,  black 0, transparent 100%);
-              -webkit-mask-image: linear-gradient(to bottom,  black 0, transparent 100%);
-              backdrop-filter: blur(6px);
-            "
+            :style="{
+              maskImage: settings.enableFrostedGlass ? 'linear-gradient(to bottom, black 0, transparent 100%)' : 'none',
+              WebkitMaskImage: settings.enableFrostedGlass ? 'linear-gradient(to bottom, black 0, transparent 100%)' : 'none',
+              backdropFilter: 'blur(6px)',
+            }"
             z--1 rounded-inherit
           />
           <div text="3xl" fw-bold>
@@ -237,10 +237,10 @@ function setCurrentTitle() {
         </header>
         <OverlayScrollbarsComponent
           ref="scrollbarRef"
-          style="
-            mask-image: linear-gradient(to bottom, transparent 0%, black 80px 30%);
-            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 80px 30%);
-          "
+          :style="{
+            maskImage: settings.enableFrostedGlass ? 'linear-gradient(to bottom, transparent 0%, black 80px 30%)' : 'none',
+            WebkitMaskImage: settings.enableFrostedGlass ? 'linear-gradient(to bottom, transparent 0%, black 80px 30%)' : 'none',
+          }"
           element="div" defer
           h-inherit
           :options="{

src/components/TopBar/TopBar.vue

@@ -119,6 +119,9 @@ const scrollTop = ref<number>(0)
 const oldScrollTop = ref<number>(0)
 const SCROLL_THRESHOLD = 10 // 滚动阈值，只有滚动超过这个值才触发顶栏显示/隐藏
 
+// 保存overlay scroll的handler引用，用于正确移除监听器
+let overlayScrollHandler: ((scrollTop: number) => void) | null = null
+
 function handleScroll(arg?: number | Event): void {
   // 优先使用传入的 scrollTop 值，避免重复 DOM 读取
   if (typeof arg === 'number') {
@@ -234,7 +237,8 @@ function setupScrollListeners() {
     toggleTopBarVisible(true)
   }
 
-  emitter.off(OVERLAY_SCROLL_BAR_SCROLL)
+  // 清理之前的监听器
+  cleanupScrollListeners()
 
   // 在视频页面根据配置决定是否设置滚动监听
   if (isVideoOrBangumiPage()) {
@@ -247,9 +251,11 @@ function setupScrollListeners() {
 
   // 设置滚动监听
   if (isHomePage() && !settings.value.useOriginalBilibiliHomepage) {
-    emitter.on(OVERLAY_SCROLL_BAR_SCROLL, (payloadScrollTop) => {
+    // 创建并保存handler引用
+    overlayScrollHandler = (payloadScrollTop: number) => {
       handleScroll(payloadScrollTop)
-    })
+    }
+    emitter.on(OVERLAY_SCROLL_BAR_SCROLL, overlayScrollHandler)
   }
   else {
     window.addEventListener('scroll', handleScroll)
@@ -258,7 +264,11 @@ function setupScrollListeners() {
 
 function cleanupScrollListeners() {
   window.removeEventListener('scroll', handleScroll)
-  emitter.off(OVERLAY_SCROLL_BAR_SCROLL)
+  // 只移除我们自己的handler，不影响其他组件（如VideoCardGrid）的监听器
+  if (overlayScrollHandler) {
+    emitter.off(OVERLAY_SCROLL_BAR_SCROLL, overlayScrollHandler)
+    overlayScrollHandler = null
+  }
 }
 
 function updateConflictingHeaderVisibility() {

src/composables/useGlobalScrollState.ts

@@ -1,18 +1,23 @@
 /**
  * 全局滚动状态管理（单例模式）
  * 所有组件共享同一个滚动检测，避免重复监听
+ * 支持 window scroll 和 OverlayScrollbars
  */
 
 import { onBeforeUnmount, onMounted, readonly, ref } from 'vue'
 
+import { OVERLAY_SCROLL_STATE_CHANGE } from '~/constants/globalEvents'
+import emitter from '~/utils/mitt'
+
 // 全局状态（单例）
 const isScrolling = ref(false)
 let scrollTimeout: ReturnType<typeof setTimeout> | null = null
 let listenerCount = 0
-let isListenerAttached = false
+let isWindowListenerAttached = false
+let isOverlayListenerAttached = false
 
-// 滚动处理函数（单例）
-function handleScroll() {
+// Window滚动处理函数（单例）
+function handleWindowScroll() {
   isScrolling.value = true
 
   if (scrollTimeout) {
@@ -24,14 +29,30 @@ function handleScroll() {
   }, 150)
 }
 
+// OverlayScrollbars滚动状态处理函数（单例）
+function handleOverlayScrollState(scrolling: boolean) {
+  isScrolling.value = scrolling
+
+  // 如果滚动结束，清理可能存在的 timeout
+  if (!scrolling && scrollTimeout) {
+    clearTimeout(scrollTimeout)
+    scrollTimeout = null
+  }
+}
+
 // 添加监听器（引用计数）
 function addScrollListener() {
   listenerCount++
 
   // 只在第一次添加时绑定事件
-  if (!isListenerAttached) {
-    window.addEventListener('scroll', handleScroll, { passive: true })
-    isListenerAttached = true
+  if (!isWindowListenerAttached) {
+    window.addEventListener('scroll', handleWindowScroll, { passive: true })
+    isWindowListenerAttached = true
+  }
+
+  if (!isOverlayListenerAttached) {
+    emitter.on(OVERLAY_SCROLL_STATE_CHANGE, handleOverlayScrollState)
+    isOverlayListenerAttached = true
   }
 }
 
@@ -40,9 +61,17 @@ function removeScrollListener() {
   listenerCount--
 
   // 当所有组件都卸载时，移除事件监听
-  if (listenerCount <= 0 && isListenerAttached) {
-    window.removeEventListener('scroll', handleScroll)
-    isListenerAttached = false
+  if (listenerCount <= 0) {
+    if (isWindowListenerAttached) {
+      window.removeEventListener('scroll', handleWindowScroll)
+      isWindowListenerAttached = false
+    }
+
+    if (isOverlayListenerAttached) {
+      emitter.off(OVERLAY_SCROLL_STATE_CHANGE, handleOverlayScrollState)
+      isOverlayListenerAttached = false
+    }
+
     listenerCount = 0
 
     if (scrollTimeout) {

src/constants/globalEvents.ts

@@ -1,5 +1,6 @@
 export const TOP_BAR_VISIBILITY_CHANGE = 'topBarVisibilityChange'
 export const OVERLAY_SCROLL_BAR_SCROLL = 'overlayScrollBarScroll'
+export const OVERLAY_SCROLL_STATE_CHANGE = 'overlayScrollStateChange'
 export const BEWLY_MOUNTED = 'bewlyMounted'
 export const DRAWER_VIDEO_ENTER_PAGE_FULL = 'drawerVideoEnterPageFull'
 export const DRAWER_VIDEO_EXIT_PAGE_FULL = 'drawerVideoExitPageFull'