封装一个数字滚动的动画

今天突发奇想，封装了一个滚动到元素位置，元素数字滚动的动画，具体实现如下

    // 数字滚动动画
    function animateValue(id, start, end, duration, endString) {
      var obj = document.getElementById(id);
      var range = end - start;
      var current = start;
      var increment = end > start ? 1 : -1;
      var stepTime = Math.abs(Math.floor(duration / range));
      console.log(stepTime, id);
      if (stepTime < 50) {
        increment = 10;
      }
      if (stepTime === 0) {
        increment = 100;
      }

      var timer = setInterval(function () {
        current += increment;
        obj.innerHTML = `${current}${endString}`;
        if (current == end) {
          clearInterval(timer);
        }
      }, stepTime);
    }

    function animateValueOnScroll(
      elementSelector,
      start,
      end,
      duration,
      endString
    ) {
      const element = document.querySelector(elementSelector);
      const animationTriggerOffset =
        element.getBoundingClientRect().top + window.pageYOffset;

      function checkScrollPosition() {
        const scrollPosition = window.pageYOffset + window.innerHeight;
        if (scrollPosition > animationTriggerOffset) {
          animateValue(element.id, start, end, duration, endString);
          window.removeEventListener("scroll", checkScrollPosition);
        }
      }

      window.addEventListener("scroll", checkScrollPosition);
      checkScrollPosition();
    }
  

使用方法也很简单

animateValueOnScroll("#t1", 0, 100, 1000, "大");
//传入对应的类名或者id 0为起始值 100为最终值  持续播放1000毫秒，最后给末尾加上一个符号

最终效果