vant 2:van-tabs组件标签切换时滚动位置不准的问题之后续

关于这个问题描述以及提供补丁方法可查看以下链接: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;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值