From ea0428321bfb8a26d7bba1b6bcc5f84ca1915c43 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 11:07:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BA=B5=E5=90=91?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=8F=B3=E4=BE=A7=E8=AF=A6=E6=83=85=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E6=BB=9A=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题描述：
- 纵向模式下，展开"相关股票"等内容后，整个页面滚动而不是右侧详情面板内部滚动
- 右侧详情面板没有独立的滚动条

根本原因：
- 外层容器没有高度限制，随内容无限增长
- Grid 使用 minH/maxH 而非固定高度
- 内层 Box 的 overflow 样式被 Chakra UI 默认样式覆盖

解决方案：
1. 外层容器（line 160）：添加纵向模式的最大高度限制 820px
2. Grid（line 293）：使用固定高度 h="800px" 替代 minH/maxH
3. 右侧 Box（line 315-337）：
   - 使用 sx prop + !important 强制应用 overflow 和 height 样式
   - 滚动条宽度优化为 3px（原 1px 太细，临时 8px 太粗）
   - 使用动态颜色变量保持主题一致性

修改文件：
- src/views/Community/components/DynamicNewsCard/EventScrollList.js

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../DynamicNewsCard/EventScrollList.js           | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
index 5384bb02..010a7c00 100644
--- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js
+++ b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
@@ -157,7 +157,7 @@ const EventScrollList = ({
         ref={scrollContainerRef}
         overflowX={mode === 'carousel' ? 'auto' : 'hidden'}
         overflowY={mode === 'four-row' || mode === 'vertical' ? 'hidden' : 'auto'}
-        maxH={mode === 'four-row' || mode === 'vertical' ? 'none' : '800px'}
+        maxH={mode === 'vertical' ? '820px' : (mode === 'four-row' ? 'none' : '800px')}
         pt={0}
         pb={4}
         px={2}
@@ -290,7 +290,7 @@ const EventScrollList = ({
 
         {/* 模式4: 纵向分栏模式 - 横向布局（时间在左，卡片在右） */}
         {mode === 'vertical' && (
-          <Grid templateColumns="1fr 2fr" gap={6} minH="500px" maxH="800px">
+          <Grid templateColumns="1fr 2fr" gap={6} h="800px">
             {/* 左侧：事件列表 (33.3%) - 使用虚拟滚动 + 双向无限滚动 */}
             <GridItem>
               <VirtualizedFourRowGrid
@@ -313,15 +313,15 @@ const EventScrollList = ({
             {/* 右侧：事件详情 (66.7%) */}
             <GridItem h="100%">
               <Box
-                overflowY="auto"
-                h="100%"
                 pl={2}
                 position="relative"
-                css={{
-                  overscrollBehavior: 'contain',
-                  overflow: 'auto !important',
+                sx={{
+                  height: '100% !important',
+                  maxHeight: '800px !important',
+                  overflowY: 'scroll !important',
+                  overflowX: 'hidden !important',
                   '&::-webkit-scrollbar': {
-                    width: '1px',
+                    width: '3px',
                   },
                   '&::-webkit-scrollbar-track': {
                     background: scrollbarTrackBg,