JavaScript to achieve balance digital scrolling effect

/**
 * Class that implements the digital scrolling effect*/
class DigitScroll {
  constructor(options) {
    //Get the container's DOM. If not, an error is thrown this.container = document.querySelector(options.container);
    if (!this.container) {
      throw Error("no container");
    }
    this.container.style.overflow = "hidden";
    this.container.style.display = "flex";
    //The height of the visible container is also the scrolling interval. The height of the container must be set, otherwise the default is 30px
    this.rollHeight = parseInt(getComputedStyle(this.container).height) || 30;
    this.container.style.height = this.rollHeight + "px";
  }
  roll(num) {
    // Split the number passed in to be scrolled and initialize the container of each digit this.initDigitEle(num);
    const numEles = this.container.querySelectorAll(".single-num");
    // Traverse and generate the scroll queue for each digit. For example, if the scroll reaches 7, generate 7 divs with contents of 0, 1, 2, 3, 4, 5, 6, and 7 for scrolling animation [...numEles].forEach((numEle, index) => {
      const curNum = 0;
      let targetNum = Number(this.numberArr[index]);
      if (curNum >= targetNum) {
        targetNum = targetNum + 10;
      }
      let cirNum = curNum;
      // Document fragments, put together and insert into the node at once const fragment = document.createDocumentFragment();
      // Generate divs corresponding to the target number from 0 to
      while (targetNum >= cirNum) {
        const ele = document.createElement("div");
        ele.innerHTML = cirNum % 10;
        cirNum++;
        fragment.appendChild(ele);
      }
      numEle.innerHTML = "";
      numEle.appendChild(fragment);
      //Reset position numEle.style.cssText +=
        "-webkit-transition-duration:0s;-webkit-transform:translateY(0)";
      setTimeout(() => {
        numEle.style.cssText += `-webkit-transition-duration:1s;-webkit-transform:translateY(${
          -(targetNum - curNum) * this.rollHeight
        }px);`;
      }, 50);
    });
  }
  // Initialize the container initDigitEle(num) {
    //Number splitting digits const numArr = num.toString().split("");
    // Document fragments, put together and insert into the node at once const fragment = document.createDocumentFragment();
    numArr.forEach((item) => {
      const el = document.createElement("div");
      // Numbers are scrolled, non-numbers such as . are not scrolled if (/[0-9]/.test(item)) {
        el.className = "single-num";
        el.style.height = this.rollHeight + "px";
        el.style.lineHeight = this.rollHeight + "px";
      } else {
        el.innerHTML = item;
        el.className = "no-move";
        el.style.verticalAlign = "bottom";
      }
      // el.style.float='left';
      fragment.appendChild(el);
    }, []);
    this.container.innerHTML = "";
    this.container.appendChild(fragment);
    //Store the scrolling numbers this.numberArr = numArr.filter((item) => /[0-9]/.test(item));
  }
}