scroller.js

export function scrollInit(divName) {
  let scroller = new Scroller(divName);
  return scroller;
}

class Scroller {
  constructor(divName) {
    this.elmnt = document.getElementById(divName);
    this.reachedMaxScroll = false;

    this.elmnt.scrollTop = 0;
    this.previousScrollTop = 0;

    this.scrollDiv();
    this.elmnt.addEventListener("mouseover", () => {
      if (this.autoScroll) this.pauseScroll();
    });
    this.elmnt.addEventListener("mouseout", () => {
      if (this.autoScroll) this.resumeScroll();
    });
    this.autoScroll = true;
  }

  scrollDiv() {
    if (!this.reachedMaxScroll) {
      this.elmnt.scrollBy({ top: 5, left: 0, behavior: "smooth" });
      this.reachedMaxScroll =
        this.elmnt.scrollTop >=
        this.elmnt.scrollHeight - this.elmnt.offsetHeight;
      this.scrollTimeout = setTimeout(() => {
        this.scrollDiv();
      }, 100);
    } else {
      this.reachedMaxScroll = this.elmnt.scrollTop == 0 ? false : true;
      this.elmnt.scrollBy({ top: -5, left: 0, behavior: "smooth" });

      this.scrollTimeout = setTimeout(() => {
        this.scrollDiv();
      }, 100);
    }
  }

  pauseScroll() {
    clearInterval(this.scrollTimeout);
  }

  resumeScroll() {
    this.scrollDiv();
  }

  switch() {
    if (this.autoScroll) {
      this.pauseScroll();
      this.autoScroll = false;
    } else {
      this.resumeScroll();
      this.autoScroll = true;
    }
  }
}