zdl
|
bf89c0e13e
|
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>
|
2025-11-05 09:58:52 +08:00 |
|