1v1视频源码，js实现滚动到某个位置动画 - 云豹科技

1v1视频源码，js实现滚动到某个位置动画

场景大概是点击tab可以滚动到对应的位置

我在vue项目里使用如下：

<ul><li @click="changeTab('first')">我是tab一</li><li @click="changeTab('second')">我是tab二</li>
</ul>
<div ref="first"><p style="height: 1400px;">这里是tab一对应的内容</p>
</div>
<div ref="second"><p style="height: 1400px;">这里是tab一对应的内容</p>
</div>

使用递归让位置一点一点滚动，结合requestAnimationFrame方法在下次重绘之前调用指定的回调函数更新动画，如果用定时器 setTimeout 会出现卡顿的情况，没有requestAnimationFrame顺畅。

scrollY(curY, y) {if (curY !== y) {// 计算需要移动的距离let differ = Math.abs(curY-y);let _curY = curY;requestAnimationFrame(() => {let step = 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) {let curY = document.documentElement.scrollTop || document.body.scrollTop;if (this.$refs[val]) this.scrollY(curY, this.$refs[val].offsetTop);}

以上就是1v1视频源码，js实现滚动到某个位置动画， 更多内容欢迎关注之后的文章