バランスの取れたデジタルスクロール効果を実現するJavaScript

/**
 * デジタルスクロール効果を実装するクラス*/
クラス DigitScroll {
  コンストラクタ(オプション) {
    // コンテナの DOM を取得します。取得できない場合はエラーがスローされます。this.container = document.querySelector(options.container);
    if (!this.container) {
      Error("コンテナがありません")をスローします。
    }
    this.container.style.overflow = "非表示";
    this.container.style.display = "flex";
    // 表示されるコンテナの高さはスクロール間隔でもあります。コンテナの高さを設定する必要があります。設定しない場合は、デフォルトは 30px です。
    this.rollHeight = parseInt(getComputedStyle(this.container).height) || 30;
    this.container.style.height = this.rollHeight + "px";
  }
  ロール(数値) {
    // 渡された数字をスクロール対象として分割し、各数字のコンテナを初期化します。this.initDigitEle(num);
    const numEles = this.container.querySelectorAll(".single-num");
    // 各桁のスクロールキューをトラバースして生成します。たとえば、スクロールが 7 に達した場合、スクロールアニメーション用に 0、1、2、3、4、5、6、7 のコンテンツを持つ 7 つの div を生成します [...numEles].forEach((numEle, index) => {
      定数curNum = 0;
      targetNum = Number(this.numberArr[index])とします。
      (現在の数値 >= 目標数値) の場合 {
        ターゲット数 = ターゲット数 + 10;
      }
      cirNum = curNum とします。
      // ドキュメントフラグメントをまとめて一度にノードに挿入します。constfragment = document.createDocumentFragment();
      // 0からターゲット番号に対応するdivを生成します
      (targetNum >= cirNum) の場合 {
        const ele = document.createElement("div");
        ele.innerHTML = cirNum % 10;
        cirNum++;
        フラグメント.appendChild(ele);
      }
      numEle.innerHTML = "";
      numEle.appendChild(フラグメント);
      //位置をリセット numEle.style.cssText +=
        "-webkit-transition-duration:0s;-webkit-transform:translateY(0)";
      タイムアウトを設定する(() => {
        numEle.style.cssText += `-webkit-transition-duration:1s;-webkit-transform:translateY(${
          -(ターゲット番号 - 現在の番号) * this.rollHeight
        }px);`;
      }, 50);
    });
  }
  // コンテナを初期化する initDigitEle(num) {
    // 数値の桁を分割する const numArr = num.toString().split("");
    // ドキュメントフラグメントをまとめて一度にノードに挿入します。constfragment = document.createDocumentFragment();
    numArr.forEach((項目) => {
      定数el = document.createElement("div");
      // 数字はスクロールされますが、. などの数字以外の文字はスクロールされません if (/[0-9]/.test(item)) {
        el.className = "single-num";
        el.style.height = this.rollHeight + "px";
        el.style.lineHeight = this.rollHeight + "px";
      } それ以外 {
        el.innerHTML = アイテム;
        el.className = "移動なし";
        el.style.verticalAlign = "下";
      }
      // el.style.float='左';
      フラグメント.appendChild(el);
    }, []);
    this.container.innerHTML = "";
    this.container.appendChild(フラグメント);
    //スクロールする数字を保存します。this.numberArr = numArr.filter((item) => /[0-9]/.test(item));
  }
}