移动端富文本markdown中表格滚动与页面滚动的冲突处理：Touch 事件 + 鼠标滚轮精确控制方案

最新推荐文章于 2025-09-02 21:24:12 发布

原创最新推荐文章于 2025-09-02 21:24:12 发布 · 1.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#计算机外设 #前端 #javascript

背景

业务需求：富文本markdown表格区域需要支持双向滚动

水平滚动：查看表格更多列
垂直滚动：滚动整个页面内容

技术挑战：在分享弹窗环境中，表格的垂直滚动被"劫持"，无法驱动页面滚动

解决方案：Touch 事件 + 鼠标滚轮精确控制

核心思路

通过 JavaScript 精确控制触摸事件和鼠标滚轮事件，区分滑动/滚动方向并分别处理：

垂直滑动/滚动：阻止表格默认行为，手动控制页面/弹窗滚动
水平滑动/滚动：让表格自然处理，实现列的水平滚动

支持的输入方式

移动端：触摸滑动手势
桌面端：鼠标滚轮滚动

实现步骤

1. 环境检测

首先检测当前是否在指定环境中，因为不同环境的滚动目标不同：

2. 事件监听

监听触摸事件和鼠标滚轮事件：

// 触摸开始：记录初始位置
// 触摸移动：方向判断和滚动控制
// 触摸结束：重置状态
// 鼠标滚轮事件：直接处理滚动

3. 滑动方向判断

这是方案的核心，通过计算滑动距离和设置合理阈值来准确判断用户意图：

4. 垂直滚动处理

触摸滑动处理：根据环境选择不同的滚动目标：

鼠标滚轮处理：相对简单，直接根据滚轮方向处理：

5. CSS 配置

.test {
  overflow-x: auto; // 允许水平滚动
  overflow-y: hidden; // 禁用垂直滚动，完全由 JS 控制
  overscroll-behavior-x: contain; // 水平滚动限制在表格内
  overscroll-behavior-y: none; // 垂直滚动不产生边界效果
  -webkit-overflow-scrolling: touch; // iOS 滚动优化
}

6. 事件监听器注册

在组件生命周期中正确注册和清理事件监听器：

// 组件挂载时注册

// 组件卸载时清理

关键技术点

1. 触摸事件的阈值设置

const SWIPE_THRESHOLD = 10 // 太小容易误触，太大响应迟钝
const DIRECTION_THRESHOLD = 30 // 确保方向判断的准确性

2. 滚动敏感度调整

// 触摸滑动：需要调整敏感度
const scrollSpeed = -deltaY * 0.8 // 0.8 是经过测试的最佳系数

// 鼠标滚轮：直接使用原始值
shareOverview.scrollTop += event.deltaY

3. 连续滚动支持

// 触摸滑动：更新起始位置
touchStartY = touch.clientY // 实现流畅的连续滚动

// 鼠标滚轮：天然支持连续滚动，无需特殊处理

4. 事件监听器配置

{
  passive: false
} // touchmove 和 wheel 需要能够 preventDefault
{
  passive: true
} // touchstart/touchend 可以被动监听，提升性能

5. 输入方式差异处理

方向判断	需要计算阈值	直接通过 deltaX/deltaY
滚动距离	需要敏感度调整	直接使用 deltaY
连续操作	需要更新起始位置	天然支持
性能考虑	高频触发，需要优化	相对低频