仿gsap滑动阻尼ScrollSmoother效果

做项目的时候想要用一下gsap的ScrollSmoother，结果发现收费，想着自己去搞一下ScrollSmoother然后自己用，搜到了一期教程

z​​​​【前端 | 教程】纯干货！三步实现滑动阻尼效果_哔哩哔哩_bilibili

 官网

自己实现

一开始按照教程添加缓动之后发现效果不佳，应该是缓动函数不一样，就去收集了一下gsap网页的滑动时变化的translate数据

const element = document.getElementById("smooth-content");
let start, previousTimeStamp;
let done = false;
let res = [];
function step(timestamp) {
  let temp = { during:0,transform:0 };
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  if (previousTimeStamp !== timestamp) {
    temp.during = elapsed;
    let str = element.style.transform;
    temp.transform = parseInt(str.split(",")[13]) 
    res.push(temp);
  }

  if (elapsed < 3000) {
    // 3 秒之后停止动画
    previousTimeStamp = timestamp;
    if (!done) {
      window.requestAnimationFrame(step);
    }
  }
  else console.log(res)
}

window.addEventListener("scroll", () => {
  window.requestAnimationFrame(step);
});

把结果放到ecahrts中可视化一下

发现cubic-bezier函数是长这样的，然后通过chrome调试器调一下cubic-bezier就出来了

代码如下

<script setup>
import { nextTick, onMounted, ref } from 'vue';

let scrollbox
const resizeBody= ()=>{
  scrollbox = document.getElementsByClassName('my-scroll-bar')[0]
  document.body.style.height = `${scrollbox.offsetHeight}px`
}
const scroll = ()=>{
  scrollbox.style.transform = `translateY(${-scrollY}px)`
}
onMounted(()=>{
  resizeBody()
  window.addEventListener('load',resizeBody)
  window.addEventListener('resize',resizeBody)
  window.addEventListener('scroll',scroll)
})
</script>

<template>
    <div class="my-scroll-bar">
      <RouterView />
    </div>
</template>

<style>
.my-scroll-bar{
  overflow: hidden;
  transition: transform 2.4s cubic-bezier(0.1, 0.79, 0.11, 0.82);
}
#app{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
}
</style>