Solution 1 :

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:

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) {

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!


Comment posted by Pete

why would you have things on the left? surely you start at the first document and then load more when you hit the end on the right. Would be terrible ux if that wasn’t the case

Comment posted by Tom

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

Comment posted by Pete

Your description seems off then – that wouldn’t be an infinite scroll as such, more like a slider / carousel. if you are just looping the same things over and over, then depending on which way you go, you just append / prepend the first / last element back into the container