diff --git a/.dumi/global.css b/.dumi/global.css
index 6c32b20c42..41fc9ed943 100644
--- a/.dumi/global.css
+++ b/.dumi/global.css
@@ -16,5 +16,5 @@
 
 html {
   scrollbar-width: thin;
-  scrollbar-color: unset;
+  scrollbar-color: #eaeaea transparent;
 }
diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
index fe781731b8..ff95739562 100644
--- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
+++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@@ -1,6 +1,6 @@
 import React, { cloneElement, isValidElement } from 'react';
 import { BugOutlined } from '@ant-design/icons';
-import { Drawer, Flex, Grid, Popover, Tag, Timeline, Typography, Button } from 'antd';
+import { Button, Drawer, Flex, Grid, Popover, Tag, Timeline, Typography } from 'antd';
 import type { TimelineItemProps } from 'antd';
 import { createStyles } from 'antd-style';
 import semver from 'semver';
@@ -76,7 +76,7 @@ const useStyle = createStyles(({ token, css }) => ({
     position: 'relative',
     [`> ${token.antCls}-drawer-body`]: {
       scrollbarWidth: 'thin',
-      scrollbarColor: 'unset',
+      scrollbarGutter: 'stable',
     },
   },
   versionWrap: css`
diff --git a/.dumi/theme/common/LiveCode.tsx b/.dumi/theme/common/LiveCode.tsx
index 2d9e8b6989..fea183755a 100644
--- a/.dumi/theme/common/LiveCode.tsx
+++ b/.dumi/theme/common/LiveCode.tsx
@@ -15,7 +15,7 @@ const useStyle = createStyles(({ token, css }) => {
           background: ${colorBgContainer};
           &-scroll-container {
             scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-gutter: stable;
           }
         }
         .dumi-default-source-code > pre,
diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx
index 25ae81eb43..8f4fd0f724 100644
--- a/.dumi/theme/common/styles/Markdown.tsx
+++ b/.dumi/theme/common/styles/Markdown.tsx
@@ -169,7 +169,7 @@ const GlobalStyle: React.FC = () => {
           border-radius: ${token.borderRadius}px;
           > pre.prism-code {
             scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-gutter: stable;
             padding: ${token.paddingSM}px ${token.paddingMD}px;
             font-size: ${token.fontSize}px;
             line-height: 2;
@@ -272,7 +272,7 @@ const GlobalStyle: React.FC = () => {
         .markdown .dumi-default-table {
           &-content {
             scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-gutter: stable;
           }
           table {
             margin: 0;
diff --git a/.dumi/theme/slots/Content/DocAnchor.tsx b/.dumi/theme/slots/Content/DocAnchor.tsx
index ffdd7080fb..223c2abd74 100644
--- a/.dumi/theme/slots/Content/DocAnchor.tsx
+++ b/.dumi/theme/slots/Content/DocAnchor.tsx
@@ -10,7 +10,7 @@ export const useStyle = createStyles(({ token, css }) => {
   return {
     anchorToc: css`
       scrollbar-width: thin;
-      scrollbar-color: unset;
+      scrollbar-gutter: stable;
       ${antCls}-anchor {
         ${antCls}-anchor-link-title {
           font-size: ${token.fontSizeSM}px;
diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
index a30eda5e4d..7029f17bd6 100644
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@@ -99,7 +99,7 @@ const useStyle = createStyles(({ token, css }) => {
           }
           & > section {
             scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-gutter: stable;
           }
         }
       }
@@ -142,7 +142,7 @@ const useStyle = createStyles(({ token, css }) => {
       .rc-virtual-list {
         .rc-virtual-list-holder {
           scrollbar-width: thin;
-          scrollbar-color: unset;
+          scrollbar-gutter: stable;
         }
       }
     `,
diff --git a/.dumi/theme/slots/Sidebar/index.tsx b/.dumi/theme/slots/Sidebar/index.tsx
index ac1f25d224..13699a855d 100644
--- a/.dumi/theme/slots/Sidebar/index.tsx
+++ b/.dumi/theme/slots/Sidebar/index.tsx
@@ -91,18 +91,17 @@ const useStyle = createStyles(({ token, css }) => {
     `,
     mainMenu: css`
       z-index: 1;
-        position: sticky;
-        top: ${token.headerHeight + token.contentMarginTop}px;
-        width: 100%;
-        height: 100%;
-        max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px);
-        overflow: hidden;
-        scrollbar-width: thin;
-        scrollbar-color: unset;
-
-        .ant-menu {
-          padding: 0 4px;
-        }
+      position: sticky;
+      top: ${token.headerHeight + token.contentMarginTop}px;
+      width: 100%;
+      height: 100%;
+      max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px);
+      overflow: hidden;
+      scrollbar-width: thin;
+      scrollbar-gutter: stable;
+      .ant-menu {
+        padding: 0 4px;
+      }
 
       &:hover {
         overflow-y: auto;
diff --git a/components/affix/__tests__/__snapshots__/demo.test.tsx.snap b/components/affix/__tests__/__snapshots__/demo.test.tsx.snap
index c200a15f08..d0c4eb4d39 100644
--- a/components/affix/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/affix/__tests__/__snapshots__/demo.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`renders components/affix/demo/on-change.tsx correctly 1`] = `
 
 exports[`renders components/affix/demo/target.tsx correctly 1`] = `
 <div
-  style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #1677ff;scrollbar-width:thin;scrollbar-color:unset"
+  style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #1677ff;scrollbar-width:thin;scrollbar-gutter:stable"
 >
   <div
     style="width:100%;height:1000px"
diff --git a/components/affix/demo/target.tsx b/components/affix/demo/target.tsx
index c5a028a93d..1a06be105d 100644
--- a/components/affix/demo/target.tsx
+++ b/components/affix/demo/target.tsx
@@ -7,7 +7,7 @@ const containerStyle: React.CSSProperties = {
   overflow: 'auto',
   boxShadow: '0 0 0 1px #1677ff',
   scrollbarWidth: 'thin',
-  scrollbarColor: 'unset',
+  scrollbarGutter: 'stable',
 };
 
 const style: React.CSSProperties = {
diff --git a/components/layout/__tests__/__snapshots__/demo.test.ts.snap b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
index eab8689c15..51efa5a0a3 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
@@ -755,7 +755,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
 >
   <aside
     class="ant-layout-sider ant-layout-sider-dark"
-    style="overflow:auto;height:100vh;position:fixed;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-color:unset;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+    style="overflow:auto;height:100vh;position:fixed;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-gutter:stable;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
     <div
       class="ant-layout-sider-children"
diff --git a/components/layout/demo/fixed-sider.tsx b/components/layout/demo/fixed-sider.tsx
index 60de341f26..cbb3aa95e8 100644
--- a/components/layout/demo/fixed-sider.tsx
+++ b/components/layout/demo/fixed-sider.tsx
@@ -22,7 +22,7 @@ const siderStyle: React.CSSProperties = {
   top: 0,
   bottom: 0,
   scrollbarWidth: 'thin',
-  scrollbarColor: 'unset',
+  scrollbarGutter: 'stable',
 };
 
 const items: MenuProps['items'] = [
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index 53af641f0c..cee604f995 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -11853,7 +11853,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
 
 exports[`renders components/table/demo/fixed-header.tsx extend context correctly 1`] = `
 <div
-  class="ant-table-wrapper acss-6kbv1r"
+  class="ant-table-wrapper acss-10ugdpo"
 >
   <div
     class="ant-spin-nested-loading"
@@ -13218,7 +13218,7 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
 
 exports[`renders components/table/demo/grouping-columns.tsx extend context correctly 1`] = `
 <div
-  class="ant-table-wrapper acss-6kbv1r"
+  class="ant-table-wrapper acss-10ugdpo"
 >
   <div
     class="ant-spin-nested-loading"
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
index e40a05bed5..b84be601d7 100644
--- a/components/table/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -9490,7 +9490,7 @@ exports[`renders components/table/demo/filter-search.tsx correctly 1`] = `
 
 exports[`renders components/table/demo/fixed-columns.tsx correctly 1`] = `
 <div
-  class="ant-table-wrapper acss-6kbv1r"
+  class="ant-table-wrapper acss-10ugdpo"
 >
   <div
     class="ant-spin-nested-loading"
@@ -10201,7 +10201,7 @@ exports[`renders components/table/demo/fixed-columns.tsx correctly 1`] = `
 
 exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] = `
 <div
-  class="ant-table-wrapper acss-6kbv1r"
+  class="ant-table-wrapper acss-10ugdpo"
 >
   <div
     class="ant-spin-nested-loading"
@@ -12113,7 +12113,7 @@ exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] =
 
 exports[`renders components/table/demo/fixed-gapped-columns.tsx correctly 1`] = `
 <div
-  class="ant-table-wrapper acss-6kbv1r"
+  class="ant-table-wrapper acss-10ugdpo"
 >
   <div
     class="ant-spin-nested-loading"
@@ -12832,7 +12832,7 @@ exports[`renders components/table/demo/fixed-gapped-columns.tsx correctly 1`] =
 
 exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
 <div
-  class="ant-table-wrapper acss-6kbv1r"
+  class="ant-table-wrapper acss-10ugdpo"
 >
   <div
     class="ant-spin-nested-loading"
@@ -14092,7 +14092,7 @@ exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
 
 exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = `
 <div
-  class="ant-table-wrapper acss-6kbv1r"
+  class="ant-table-wrapper acss-10ugdpo"
 >
   <div
     class="ant-spin-nested-loading"
@@ -27849,7 +27849,7 @@ exports[`renders components/table/demo/summary.tsx correctly 1`] = `
   class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-table-wrapper acss-6kbv1r"
+    class="ant-table-wrapper acss-10ugdpo"
   >
     <div
       class="ant-spin-nested-loading"
@@ -28032,7 +28032,7 @@ exports[`renders components/table/demo/summary.tsx correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-table-wrapper acss-6kbv1r"
+    class="ant-table-wrapper acss-10ugdpo"
   >
     <div
       class="ant-spin-nested-loading"
diff --git a/components/table/demo/fixed-columns-header.tsx b/components/table/demo/fixed-columns-header.tsx
index bb14c1dcb9..9bc4c901d1 100644
--- a/components/table/demo/fixed-columns-header.tsx
+++ b/components/table/demo/fixed-columns-header.tsx
@@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
           ${antCls}-table-body,
           ${antCls}-table-content {
             scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-color: #eaeaea transparent;
+            scrollbar-gutter: stable;
           }
         }
       }
diff --git a/components/table/demo/fixed-columns.tsx b/components/table/demo/fixed-columns.tsx
index 6f34f9192b..781723b735 100644
--- a/components/table/demo/fixed-columns.tsx
+++ b/components/table/demo/fixed-columns.tsx
@@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
           ${antCls}-table-body,
           ${antCls}-table-content {
             scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-color: #eaeaea transparent;
+            scrollbar-gutter: stable;
           }
         }
       }
diff --git a/components/table/demo/fixed-gapped-columns.tsx b/components/table/demo/fixed-gapped-columns.tsx
index 6a0dcf51e0..771cdd524a 100644
--- a/components/table/demo/fixed-gapped-columns.tsx
+++ b/components/table/demo/fixed-gapped-columns.tsx
@@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
           ${antCls}-table-body,
           ${antCls}-table-content {
             scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-color: #eaeaea transparent;
+            scrollbar-gutter: stable;
           }
         }
       }
diff --git a/components/table/demo/fixed-header.tsx b/components/table/demo/fixed-header.tsx
index 5c55b72965..931e495c19 100644
--- a/components/table/demo/fixed-header.tsx
+++ b/components/table/demo/fixed-header.tsx
@@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
           ${antCls}-table-body,
           ${antCls}-table-content {
             scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-color: #eaeaea transparent;
+            scrollbar-gutter: stable;
           }
         }
       }
diff --git a/components/table/demo/grouping-columns.tsx b/components/table/demo/grouping-columns.tsx
index a0aaabb2cb..86fb03bdef 100644
--- a/components/table/demo/grouping-columns.tsx
+++ b/components/table/demo/grouping-columns.tsx
@@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
           ${antCls}-table-body,
           ${antCls}-table-content {
             scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-color: #eaeaea transparent;
+            scrollbar-gutter: stable;
           }
         }
       }
diff --git a/components/table/demo/summary.tsx b/components/table/demo/summary.tsx
index 1fdae9d80e..b230f5a001 100644
--- a/components/table/demo/summary.tsx
+++ b/components/table/demo/summary.tsx
@@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
           ${antCls}-table-body,
           ${antCls}-table-content {
             scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-color: #eaeaea transparent;
+            scrollbar-gutter: stable;
           }
         }
       }