fix: 修复纵向模式右侧详情折叠展开后无法滑动的问题

问题描述:
- 纵向模式下,右侧详情面板中的折叠区块(相关股票、历史事件等)展开后
- 右侧面板无法滚动,用户无法查看完整内容

根本原因:
- Chakra UI Collapse 组件在动画过程中设置 overflow: hidden
- 动画结束后可能没有正确恢复,影响父容器的滚动功能
- 嵌套滚动容器之间存在冲突

解决方案:

1. CollapsibleSection.js
   - 为 Collapse 组件添加 unmountOnExit={false}
   - 添加 startingHeight={0} 确保动画从 0 开始
   - 防止 Collapse 动画干扰父容器的 overflow 属性

2. EventScrollList.js
   - 为右侧详情 Box 添加 position="relative"
   - 使用 overflow: auto !important 强制保持滚动功能
   - 确保即使子元素有 overflow 设置也不受影响

技术细节:
- unmountOnExit={false} 保持 DOM 节点存在,避免频繁挂载/卸载
- startingHeight={0} 确保折叠动画的起始高度一致
- !important 提高 CSS 优先级,覆盖子元素的 overflow 设置
- position: relative 创建新的层叠上下文,隔离滚动行为

影响范围:
- 纵向模式右侧详情面板
- 所有使用 CollapsibleSection 的区块

测试建议:
1. 切换到纵向模式
2. 展开"相关股票"或其他折叠区块
3. 尝试滚动右侧详情面板
4. 确认可以正常查看所有内容

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-11-05 09:58:52 +08:00
parent 4e7fcaad5c
commit bf89c0e13e
2 changed files with 8 additions and 1 deletions

View File

@@ -29,7 +29,12 @@ const CollapsibleSection = ({ title, isOpen, onToggle, count = null, children })
onToggle={onToggle}
count={count}
/>
<Collapse in={isOpen} animateOpacity>
<Collapse
in={isOpen}
animateOpacity
unmountOnExit={false}
startingHeight={0}
>
<Box mt={2} bg={sectionBg} p={3} borderRadius="md">
{children}
</Box>