记录一次scrollIntoView实际应用

9 阅读2分钟

背景

有一个表格,其中有部分字段可编辑,可编辑的字段不固定,由业务条件动态计算出来,可编辑字段可能是文本输入框、数字输入框、选择器等

表格结构

表格上方是按钮区域,按钮区域初始展示Edit按钮,此时表格所有字段处于正常展示态,点击Edit,进入表格编辑态,表格中可编辑字段会变成输入框、选择器等,按钮区域变成Cancel和Confirm两个按钮,分别代表取消编辑和确认编辑两种功能

关于表格: 前两个字段固定展示在左侧(sticky),最后一个字段固定展示在最右侧(sticky),这三个字段确定不可编辑,不随其它字段一起滚动

目标功能

当点击Edit按钮,第一个可编辑字段自动滚动至可视区域,紧贴在第二个sticky字段的后面

实现

这是一个目标节点自动滚入视区的功能,自然而然想到了scrollIntoView方法

  1. 首先遍历columns获得第一个可编辑的字段,给目标字段(表头和表格内容)加特殊类名标识first-edit-col
  2. 当点击Edit按钮时,延时2s(等待重渲染完毕)获取类名为first-edit-col的所有节点,对这些节点调用scrollIntoView

以为这就可以了吗?No,问题出现了! 当点击Edit按钮,第一个可编辑字段并没有如预期那样滚入视区,仅靠在第二个sticky字段的右侧,而是正好在视区右侧,差一点儿就进入视区了,唉。除此之外,,,当手动左右滑动表格时,表头和表格内容错位了!!,将表格滚动至最右侧,表头和表格内容又恢复对齐,再来回滚动也不会有问题了。

而如果在表格错位后,先滑动看左侧字段,会发现根本滑动不了,按理说第一个可编辑字段左侧的字段在滑动后可以正常出现才对,但现在这些节点直接“丢了”

这个问题看上去是表格有动态计算逻辑导致的,scrollIntoView打乱了计算逻辑

一开始我以为是表格中sticky的字段影响了滚动,所以首先尝试把所有sticky功能都去掉,事实证明没有起作用,还是错位

然后猜想表格自定义了scroll功能(因为我发现表格的滚动条是自定义的),scroll计算逻辑和scrollIntoView冲突了,绝望之际,突然发现表格设定了虚拟滚动!!

没错,罪魁祸首就是虚拟滚动导致的,因为这个表格已知确定数据量很小,所以果断去掉了虚拟滚动,结果,错位如期恢复