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);
    }

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据