diff --git a/src/renderer/src/assets/styles/responsive.css b/src/renderer/src/assets/styles/responsive.css index e4ceadb432..f9b1a046d5 100644 --- a/src/renderer/src/assets/styles/responsive.css +++ b/src/renderer/src/assets/styles/responsive.css @@ -9,6 +9,11 @@ --topic-list-width: 275px; --settings-width: 250px; + --scrollbar-width: 5px; +} + +/* Windows系统专用滚动条配置 */ +body[os='windows'] { --scrollbar-width: 10px; } diff --git a/src/renderer/src/assets/styles/scrollbar.css b/src/renderer/src/assets/styles/scrollbar.css index 80370983ad..b8403c148a 100644 --- a/src/renderer/src/assets/styles/scrollbar.css +++ b/src/renderer/src/assets/styles/scrollbar.css @@ -7,10 +7,9 @@ --color-scrollbar-thumb: var(--color-scrollbar-thumb-dark); --color-scrollbar-thumb-hover: var(--color-scrollbar-thumb-dark-hover); - --scrollbar-width: 10px; + --scrollbar-width: 6px; --scrollbar-height: 6px; --scrollbar-thumb-radius: 10px; - --scrollbar-thumb-width: 6px; } body[theme-mode='light'] { @@ -18,6 +17,11 @@ body[theme-mode='light'] { --color-scrollbar-thumb-hover: var(--color-scrollbar-thumb-light-hover); } +/* Windows系统专用滚动条配置 - 增加宽度以避免与窗口调整大小区域重叠 */ +body[os='windows'] { + --scrollbar-width: 10px; +} + /* 全局初始化滚动条样式 */ ::-webkit-scrollbar { width: var(--scrollbar-width); @@ -32,7 +36,10 @@ body[theme-mode='light'] { ::-webkit-scrollbar-thumb { border-radius: var(--scrollbar-thumb-radius); background: var(--color-scrollbar-thumb); - /* Add transparent border to create space from window edge */ +} + +/* Windows系统滚动条添加右侧间距,避免与窗口调整大小区域重叠 */ +body[os='windows'] ::-webkit-scrollbar-thumb { border-right: 2px solid transparent; background-clip: padding-box; } @@ -77,7 +84,10 @@ pre:not(.shiki)::-webkit-scrollbar-thumb:hover { .rc-virtual-list-scrollbar-thumb { border-radius: var(--scrollbar-thumb-radius) !important; background: var(--color-scrollbar-thumb) !important; - /* Add transparent border to create space from window edge */ +} + +/* Windows系统虚拟列表滚动条添加右侧间距 */ +body[os='windows'] .rc-virtual-list-scrollbar-thumb { border-right: 2px solid transparent !important; background-clip: padding-box !important; }