关于 SpreadJS 与 Microsoft Excel 鼠标滚动行为差异及解决方案探讨

收藏 · 2024-10-31 17:43 上传

当光标点击单元格令单元格为输入或编辑状态时，在不移动光标的情况下，Microsoft Excel对鼠标滚动同时滚动Sheet页面，而SpreadJS不滚动Sheet页面。经过调研，确认这是SpreadJS和Microsoft Excel的一个设计区别。在对文本内容较长的单元格进行再编辑时，SpreadJS的设计使得滚动鼠标将同步滚动单元格中的文本内容，即滚动对象为单元格中的内容，这一点确实有其存在之合理性。那么，如果某些只对Microsoft Excel有使用经验的用户可能想要在SpreadJS中保留针对该功能的Excel操作习惯，是否能够满足用户的需要呢？依然需要分析下先，之后自然可以得到结论。

鼠标双击单元格令单元格切换为输入状态，在此基础上再次单击单元格，即为编辑状态。当单元格处于输入状态或编辑状态时，焦点在活动单元格上。既然焦点在活动单元格上，由于单元格是Workbook实例的一部分，那么，焦点也在Workbook实例上。由于只能通过Workbook获取或失去焦点，所以，可以针对Workbook失焦再聚焦来切换鼠标滚动能够作用的内容。具体思路如下：

1. 对window监听mousewheel事件，以监听鼠标滚动事件。
2. 当mousewheel事件被触发时，判断当前Worksheet是否为编辑状态。
3. 如果当前Worksheet为编辑状态，则先令Workbook实例失焦，即退出编辑，然后再令其获取焦点，以结合鼠标滚动同步滚动页面。

上述代码对应的代码如下所示，其运行效果如图1所示。附上demo，以供参考。

window.addEventListener('mousewheel', function(event) {
if (spread.getActiveSheet().isEditing()) {
console.log('鼠标滚动:', event.wheelDelta);
// 令spread实例失焦
spread.focus(false);
// 令spread实例聚焦，以同步鼠标滚动
spread.focus(true);
}
});

复制代码

图1. 鼠标滚动页面

问题原帖：https://gcdn.grapecity.com.cn/showtopic-228004-1-1.html

		自动登录	找回密码
密码			立即注册

关于 SpreadJS 与 Microsoft Excel 鼠标滚动行为差异及解决方案探讨

0 个回复