refactor(scrollbar): 移除自定义滚动条探测逻辑

Licoy · Licoy · commit 25145fcc2814 · 2026-03-26T17:32:14.000+08:00
diff --git a/src/index.css b/src/index.css
@@ -78,22 +78,13 @@ b, strong, th,
   font-weight: calc(var(--font-weight, 400) + 200) !important;
 }
 
-/*
- * Scrollbar styling — two tiers:
- *
- * 1. Standard properties (scrollbar-width, scrollbar-color) always apply.
- *    These provide the baseline thin, semi-transparent scrollbar on all
- *    platforms (Safari 17.4+, Firefox, Chrome 121+).
- *
- * 2. ::-webkit-scrollbar pseudo-elements are gated behind the
- *    .webkit-scrollbar-ok class on <html>.  A runtime probe in main.tsx
- *    adds this class only when WebKit custom scrollbar rendering actually
- *    works.  When active, ::-webkit-scrollbar disables the standard
- *    properties (browser behaviour), giving us border-radius, transitions,
- *    and finer control.
- */
-
-/* ── Tier 1: Standard scrollbar properties (always active) ────────── */
+/* Scrollbar styling — standard properties only (scrollbar-width, scrollbar-color).
+ * Works consistently across Safari 17.4+, Firefox 64+, Chrome 121+.
+ * We intentionally avoid ::-webkit-scrollbar pseudo-elements: on macOS,
+ * matching them activates WebKit's "custom scrollbar" mode which DISABLES
+ * standard scrollbar-color.  If the custom renderer is buggy (e.g. WKWebView
+ * linked against an older SDK), neither path produces correct output. */
+
 * {
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
@@ -105,36 +96,7 @@ html[data-theme="dark"] *:hover {
   scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
 }
 
-/* ── Tier 2: WebKit custom scrollbar (only when probe succeeds) ───── */
-.webkit-scrollbar-ok ::-webkit-scrollbar {
-  width: 5px !important;
-  height: 5px !important;
-}
-.webkit-scrollbar-ok ::-webkit-scrollbar-track {
-  background: transparent !important;
-}
-.webkit-scrollbar-ok ::-webkit-scrollbar-thumb {
-  background: transparent !important;
-  border-radius: 3px !important;
-  transition: background 0.3s ease;
-}
-.webkit-scrollbar-ok ::-webkit-scrollbar-corner {
-  background: transparent !important;
-}
-.webkit-scrollbar-ok :hover::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.08) !important;
-}
-.webkit-scrollbar-ok :hover::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.18) !important;
-}
-html[data-theme="dark"].webkit-scrollbar-ok :hover::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.08) !important;
-}
-html[data-theme="dark"].webkit-scrollbar-ok :hover::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.18) !important;
-}
-
-/* ── Override antd Bubble.List scrollbar ──────────────────────────── */
+/* Override antd Bubble.List scrollbar — it sets its own CSS-in-JS styles */
 .ant-bubble-list-scroll-box {
   scrollbar-color: transparent transparent !important;
 }
@@ -144,25 +106,6 @@ html[data-theme="dark"].webkit-scrollbar-ok :hover::-webkit-scrollbar-thumb:hove
 html[data-theme="dark"] .ant-bubble-list-scroll-box:hover {
   scrollbar-color: rgba(255, 255, 255, 0.08) transparent !important;
 }
-.webkit-scrollbar-ok .ant-bubble-list-scroll-box::-webkit-scrollbar {
-  width: 5px !important;
-}
-.webkit-scrollbar-ok .ant-bubble-list-scroll-box::-webkit-scrollbar-thumb {
-  background-color: transparent !important;
-  border-radius: 3px !important;
-}
-.webkit-scrollbar-ok .ant-bubble-list-scroll-box:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.08) !important;
-}
-.webkit-scrollbar-ok .ant-bubble-list-scroll-box:hover::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.18) !important;
-}
-html[data-theme="dark"].webkit-scrollbar-ok .ant-bubble-list-scroll-box:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.08) !important;
-}
-html[data-theme="dark"].webkit-scrollbar-ok .ant-bubble-list-scroll-box:hover::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.18) !important;
-}
 
 /* Custom action item hover style (for actionRender items in @ant-design/x Actions) */
 .aqbot-action-item {
diff --git a/src/main.tsx b/src/main.tsx
@@ -3,48 +3,6 @@ import ReactDOM from 'react-dom/client';
 import AppRoot from './App';
 import './index.css';
 
-// Probe whether ::-webkit-scrollbar custom rendering actually works.
-// On macOS, WKWebView compiled against older SDKs may recognise the pseudo-
-// element (blocking standard scrollbar-color) without rendering it correctly,
-// producing a solid-black native scrollbar.  The probe creates an off-screen
-// scrollable div, applies a custom scrollbar width via a scoped stylesheet,
-// and checks whether the layout width changes.  If it does, the custom
-// scrollbar pipeline is functional and we enable the ::-webkit-scrollbar rules
-// in index.css by adding the `webkit-scrollbar-ok` class to <html>.
-(() => {
-  const outer = document.createElement('div');
-  Object.assign(outer.style, {
-    position: 'fixed',
-    top: '-9999px',
-    left: '-9999px',
-    width: '100px',
-    height: '100px',
-    overflow: 'scroll',
-    visibility: 'hidden',
-  });
-  const inner = document.createElement('div');
-  inner.style.height = '200px';
-  outer.appendChild(inner);
-  document.documentElement.appendChild(outer);
-
-  const defaultWidth = outer.offsetWidth - outer.clientWidth;
-
-  const style = document.createElement('style');
-  style.textContent = '#__scrollbar_probe::-webkit-scrollbar { width: 1px !important; }';
-  document.head.appendChild(style);
-  outer.id = '__scrollbar_probe';
-  // Force re-layout after stylesheet injection
-  void outer.offsetWidth;
-  const customWidth = outer.offsetWidth - outer.clientWidth;
-
-  outer.remove();
-  style.remove();
-
-  if (customWidth !== defaultWidth) {
-    document.documentElement.classList.add('webkit-scrollbar-ok');
-  }
-})();
-
 // Disable native context menu (reload, inspect element, etc.) in production builds.
 // Custom context menus (antd Dropdown with trigger={['contextMenu']}) are unaffected
 // since they use React synthetic events, not the browser's native context menu.
