Scrolling is an implementation of data display whenever we cannot fit everything onto a single page. Most websites are generally implemented this way due to the inability to fit all the content on the computer screen (Twitter, Facebook feed… etc).
The problem:

I’m currently trying to implement a horizontal scroll in both directions. As of now only one side is working, namely to the right.

My approach was to push the displayed array as soon as scroll get close to the document’s clientHeight. How do I implement the same behavior for the other direction?

@HostListener('window:scroll', [])
  scroll() {
    if (isPlatformBrowser(this.platformId)) {
      const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
      this.translateX = (scroll / 2) * -1;
      const height = document.querySelector('.hidden-container').clientHeight;
      const pos = scroll + document.documentElement.clientHeight;
      if (pos > height - 100 && pos < height + 100) {
        this.cases.push(...this.c);
      }
    }
}

FYI it’s not for loading data asnyc. It’s a portfolio, the cases shall be repeated infinitly no matter what directions the user scrolls!