关于这个问题描述以及提供补丁方法可查看以下链接:vant 2:van-tabs组件标签切换时滚动位置不准的问题https://blog.youkuaiyun.com/weixin_48226213/article/details/131856167?spm=1001.2014.3001.5502
后来我又重新搭了个工程来引入van-tabs看能否重现这个bug,发现是正常没问题, 让我不得不怀疑是原来那个工程某个地方的代码造成的这个bug。
经过不懈的努力排查,终于找到真正原因,就是由于全局对于div的重置样式加上了scroll-behavior: smooth;
于是把项目中的scroll-behavior: smooth; 删除即可修复此问题,也无须打补丁重写van-tabs源码的方法了,这就是最终的完美解决方案。
原因分析:根据官方解释设置了scroll-behavior: smooth;会实现元素的平滑滚动,由浏览器根据滚动距离和滚动时间,来实现平滑的滚动动画。其实跟van-tabs源码中scrollLeftTo方法,做的是相同的事情,于是会导致requestAnimationFrame调用animate方法时nav.scrollLeft是不准的,因为每次调用requestAnimationFrame时元素没有马上滚动。
最后对于vant组件库建议加上这行样式杜绝此问题:
.van-tabs__nav{
scroll-behavior: unset!important;
}