fix(scrollbar): prevent cursor flicker with CSS-based auto-hide ursor flicker

src/web/toManual/js/scrollbar.jsx

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Scrollbars } from 'react-custom-scrollbars';
 
 function renderScrollBarTrackHorizontal(props) {
@@ -27,14 +27,66 @@ function renderView(props) {
 }
 
 export default function(props) {
+  const scrollbarsRef = useRef(null);
+  const timeoutRef = useRef(null);
+
+  useEffect(() => {
+    const scrollbars = scrollbarsRef.current;
+    if (!scrollbars) return;
+
+    const showScrollbar = () => {
+      const container = scrollbars.container;
+      if (container) {
+        container.style.setProperty('--scrollbar-opacity', '1');
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(hideScrollbar, 800);
+    };
+
+    const hideScrollbar = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      const container = scrollbars.container;
+      if (container) {
+        container.style.setProperty('--scrollbar-opacity', '0');
+      }
+    };
+
+    const view = scrollbars.view;
+    const container = scrollbars.container;
+    if (view) {
+      view.addEventListener('scroll', showScrollbar);
+    }
+    if (container) {
+      container.addEventListener('mousemove', showScrollbar);
+      container.addEventListener('mouseleave', hideScrollbar);
+    }
+
+    return () => {
+      if (view) {
+        view.removeEventListener('scroll', showScrollbar);
+      }
+      if (container) {
+        container.removeEventListener('mousemove', showScrollbar);
+        container.removeEventListener('mouseleave', hideScrollbar);
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
   return (
     <Scrollbars
       {...props}
+      ref={scrollbarsRef}
       className="scrollbar"
-      autoHide
       renderTrackHorizontal={renderScrollBarTrackHorizontal}
       renderView={renderView}
-      autoHideTimeout={800}
     >
       {props.children}
     </Scrollbars>

src/web/toManual/sass/app.scss

@@ -22,29 +22,39 @@ body {
   }
 }
 
-.scrollbar>div:last-child {
-  width: 6px !important;
-  border-radius: 3px !important;
+// 使用 CSS 变量实现滚动条自动隐藏，避免 JavaScript autoHide 导致的光标闪烁
+// CSS变量的改变只会触发重绘（repaint），不会触发回流（reflow），因此不会导致光标闪烁
+.scrollbar {
+  // 滚动条轨道（垂直）
+  > div:last-child {
+    width: 6px !important;
+    border-radius: 3px !important;
+    opacity: var(--scrollbar-opacity, 0); // 使用CSS变量，默认值为0
+    transition: opacity 0.3s ease-in-out;
+
+    // 滚动条滑块
+    div {
+      background-color: var(--scrollbar-div-background-color) !important;
+      cursor: default !important;
 
-  div {
-    background-color: var(--scrollbar-div-background-color) !important;
-    cursor: default !important;
+      &:hover {
+        background-color: var(--scrollbar-div-hover-background-color) !important;
+      }
+    }
 
     &:hover {
-      background-color: var(--scrollbar-div-hover-background-color) !important;
+      width: 8px !important;
+      border-radius: 4px !important;
     }
   }
-
-  &:hover {
-    width: 8px !important;
-    border-radius: 4px !important;
-  }
 }
 
+// 文本选择模式下滚动条保持显示
 body[style*='user-select: none'] {
-  .scrollbar>div:last-child {
+  .scrollbar > div:last-child {
     width: 8px !important;
     border-radius: 4px !important;
+    opacity: 1;
 
     div {
       background-color: var(--scrollbar-div-select-background-color) !important;

src/web_dist/toManual/index.css

@@ -14,7 +14,9 @@ body {
 
 .scrollbar > div:last-child {
   width: 6px !important;
-  border-radius: 3px !important; }
+  border-radius: 3px !important;
+  opacity: var(--scrollbar-opacity, 0);
+  transition: opacity 0.3s ease-in-out; }
   .scrollbar > div:last-child div {
     background-color: var(--scrollbar-div-background-color) !important;
     cursor: default !important; }
@@ -26,7 +28,8 @@ body {
 
 body[style*='user-select: none'] .scrollbar > div:last-child {
   width: 8px !important;
-  border-radius: 4px !important; }
+  border-radius: 4px !important;
+  opacity: 1; }
   body[style*='user-select: none'] .scrollbar > div:last-child div {
     background-color: var(--scrollbar-div-select-background-color) !important; }