e-virt-table 项目中滚动事件与数据加载的优化实践

最新推荐文章于 2025-06-10 09:10:57 发布

陈尤俐

最新推荐文章于 2025-06-10 09:10:57 发布

阅读量358

点赞数 4

本文链接：https://blog.youkuaiyun.com/gitblog_07824/article/details/148550928

版权

e-virt-table 项目中滚动事件与数据加载的优化实践

e-virt-table A powerful data table based on canvas. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc. 项目地址: https://gitcode.com/gh_mirrors/ev/e-virt-table

问题背景

在开发基于 e-virt-table 虚拟表格的项目时，我们遇到了一个典型场景：需要实时加载服务器数据并自动滚动到底部显示最新内容。然而，在实际实现过程中发现，表格的 resize 操作会意外触发 scroll 事件，导致数据加载逻辑出现异常。

核心问题分析

事件触发机制

通过深入分析发现，当鼠标在表头区域移动时，会触发以下连锁反应：

浏览器触发 mousemove 事件
表格组件进行重绘计算
重绘过程中重新计算滚动条位置
最终触发 scroll 事件回调

这种机制导致即使用户没有主动滚动表格，仅仅移动鼠标也会触发 scroll 事件，干扰了正常的数据加载逻辑。

业务场景需求

典型的业务场景通常包含两种模式：

实时模式：自动接收服务器数据，加载到表格并滚动到底部显示最新内容
暂停模式：用户手动控制滚动位置查看历史数据

在这种场景下，我们需要准确区分：

用户主动触发的滚动（通过滚轮或拖动滚动条）
程序自动触发的滚动（如调用 scrollToRowIndex API）
其他内部操作触发的滚动（如 resize、重绘等）

解决方案演进

初始方案：isTrust 属性

开发者最初尝试通过添加 isTrust 属性来区分事件来源：

true：表示由用户交互触发
false：表示由程序 API 触发

然而这种方案存在局限性：

无法覆盖所有内部触发场景（如重绘导致的滚动）
业务逻辑变得复杂，需要处理多种情况

优化方案：事件类型区分

更合理的解决方案是：

对于用户主动滚动：监听 wheel 事件和滚动条拖动事件
对于程序控制滚动：直接使用 scrollToRowIndex 等 API
对于其他内部操作：通过特定标志位忽略处理

实现建议

在实际编码中，可以采用以下模式：

// 用户滚动处理
table.on('wheel', (e) => {
    if(e.deltaY !== 0) { // 垂直滚动
        handleUserScroll();
    }
});

// 程序滚动API
function programmaticScroll() {
    table.scrollToRowIndex(data.length - 10);
}

// 数据加载逻辑
function loadData() {
    // 加载数据...
    if(autoScrollMode) {
        programmaticScroll();
    }
}