场景大概是点击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);
}