feat: 更新md文档
This commit is contained in:
@@ -1054,6 +1054,53 @@ feat: 删除不需要的组件
|
||||
|
||||
---
|
||||
|
||||
### 2025-01-XX: 纵向分栏模式滚动行为优化
|
||||
|
||||
**变更类型**: 用户体验优化
|
||||
|
||||
**优化内容**: 改进纵向分栏模式(VerticalModeLayout)的滚动交互体验,解决右侧详情面板滚动触发页面滚动以及固定模式切换逻辑的问题。
|
||||
|
||||
**改进点**:
|
||||
|
||||
1. **右侧详情面板滚动隔离** - `EventDetailScrollPanel.js`
|
||||
- 添加 `overscrollBehavior: 'contain'` 属性,防止滚动传播到页面
|
||||
- 添加 `data-detail-panel-container` 标识,与左侧列表区分
|
||||
|
||||
2. **左侧事件列表明确标识** - `VerticalModeLayout.js`
|
||||
- 将 `data-scroll-container` 改为 `data-event-list-container`
|
||||
- 明确标识左侧事件列表容器,便于固定模式逻辑识别
|
||||
|
||||
3. **固定模式进入/退出机制优化** - `DynamicNewsCard.js`
|
||||
- **进入参数**: `TRIGGER_OFFSET = 150px`(原 100px)- 更平滑的视觉过渡
|
||||
- **退出参数**:
|
||||
- `EXIT_OFFSET = 200px` - 退出比进入更容易(非对称设计)
|
||||
- `EXIT_THRESHOLD = 30px` - 接近顶部 30px 内即可退出(原需精确 0px)
|
||||
- **退出逻辑**: 双重检测机制
|
||||
- 条件 1: CardHeader 位置超过退出点 → 退出固定模式
|
||||
- 条件 2: 左侧事件列表滚动到顶部附近 → 退出固定模式
|
||||
- 任一条件满足即退出,提升用户体验
|
||||
- **性能优化**: 在 `handleWheel` 中添加 `requestAnimationFrame`,提高滚动性能
|
||||
|
||||
**用户体验提升**:
|
||||
- ✅ 右侧详情面板滚动不再触发整个页面滚动
|
||||
- ✅ 右侧详情面板滚动不再影响固定模式切换
|
||||
- ✅ 只有左侧事件列表滚动才会触发固定模式退出
|
||||
- ✅ 固定模式进入/退出更流畅(150px/200px 非对称设计)
|
||||
- ✅ 退出固定模式更容易(接近顶部即可,无需精确到 0px)
|
||||
|
||||
**技术细节**:
|
||||
- 使用 CSS `overscrollBehavior` 隔离滚动链
|
||||
- 使用 `data-*` 属性区分不同滚动容器类型
|
||||
- 非对称触发距离设计(进入 150px,退出 200px)
|
||||
- 双重检测退出条件(位置检测 OR 滚动检测)
|
||||
|
||||
**影响范围**:
|
||||
- `src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js`
|
||||
- `src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js`
|
||||
- `src/views/Community/components/DynamicNewsCard.js`
|
||||
|
||||
---
|
||||
|
||||
## 🔗 相关文档
|
||||
|
||||
- [项目总览 - CLAUDE.md](../CLAUDE.md)
|
||||
|
||||
Reference in New Issue
Block a user