实现添加元素，平滑滚动效果

背景：

如图，点击添加流程时，如果不加滚动到中间的效果，就是仅仅新增了元素，还需要手动滚动才能看全。体验不是特别好。

解决方案

方案一

不废话，直接看滚动到视图Api介绍 scrollIntoView

因为我这个是横向滚动，所以实现关键代码如下：

    this.$refs.targetElment[toIndex].scrollIntoView({
      behavior: 'smooth', // 平滑滚动
      inline: 'center', // 水平方向滚动到视图的center位置
    })

当然也遇到了使用 scrollIntoView时容器元素偏移的现象

搜了一圈都说解决不了，采用另一个更好的方案(方案二)，但是我把外层不相干的元素隐藏掉，比如定位的，多余flex的元素，保证scrollIntoView的容器是一个干净的，就不会出现偏移现象了。

我猜测是因为在执行scrollIntoView时，把同级元素给拉过来了。

方案二

这方案滚动效果也很丝滑，不过需要自己计算要滚动的目标位置

    this.$refs.targetElment.scroll({
      left: 0,
      behavior: 'smooth'
    })

最终效果