ScrollIntoView滚动失效，不滚动

项目背景

技术栈：

Vue3+Ts+Vite的项目、组件使用Element Plus。

问题简述：

ScrollIntoView滚动失效，不滚动。由于在前一个版本接口响应回前端大约需要3-4秒，此版本无这个问题。后续后端对接口进行了优化，在1-2s内，出现了滚动无效的问题，在性能较差的虚拟机上此问题稳定复现，在性能好的环境无法复现。

在Input框中输入EQP ID，回车后先选中数据，若Eqp不在可视范围内，需要将Eqp滚动到可视范围的中间，再根据选中的数据请求接口，接口返回数据渲染Table

当Input框输入完设备ID后按Enter键后需要选中对应的设备，并且将设备滚动到视口区域内。此处采用ScrollIntoView

node.scrollIntoView({behavior:'smooth',block:'center'})

当右侧Table无数据时发现滚动执行正常，但是当右侧Table有数据时滚动失效。

分析过程：

1.断点排查发现是接口请求后滚动就停止了，和接口响应速度有关

2.使用setTimeout设置1s时也可正常执行，但是500ms只会执行一段距离，并未滚动到理想位置

推测：

1.接口响应里有对应的动画从而中断了滚动的动画（排除：接口里只有Loading的展示与否动画，且注释掉后情况仍存在）

2.接口返回的数据对页面Table需要进行渲染，由于需要对页面Dom进行重绘，导致的Scroll无效（Table赋值代码注释掉后可正常执行）

解决方案

1.将滚动动画在接口请求成功完成后再调用（会造成滚动的延迟感，未采用）

2.滚动执行后再调用接口（由于滚动的事件监听需要将方法改造成Promise，用observer观察，实际使用结果可顺利执行，但定位不准确。时间关系且改动较大，未采用）

3.去除behavior：‘smooth’动画效果（采用---简单粗暴哈哈哈哈）