js实现滚动到某个位置动画
场景大概是点击tab滚动到对应位置。我在vue项目中使用如下:
这是tabone对应的内容 这里是tab对应的内容 使用递归让位置一点点滚动,结合requestAnimationFrame方法调用指定的回调在下一次重绘之前更新动画的函数。如果使用定时器setTimeout,会出现卡顿,不如requestAnimationFrame流畅。scrollY(curY,y){if(curY!==y){//计算移动的距离letdiffer=Math.abs(curY-y);让_curY=curY;requestAnimationFrame(()=>{letstep=Math.ceil(differ/5);_curY+=step;window.scrollTo(window.scrollX,curY);if(differ>5||differ<-5){this.scrollY(_curY,y);}else{window.scrollTo(window.scrollX,y);}});}}使用时,将当前位置和要滚动的位置传给scrollY函数changeTab(val){letcurY=document.documentE元素.scrollTop||文档.body.scrollTop;如果(this.$refs[val])this.scrollY(curY,this.$refs[val].offsetTop);}