Never ending scroll, clone items both sides

I want to be able to scroll both sides endlessly meaning it will clone elements before reaching the end.

example: https://codepen.io/rKaiser/pen/wOGmqN

  $('.timeline-container').on('scroll',function() {
      //columns = innerContent.length * 101; // multiply by column width
      console.log(this.scrollLeft)
      //console.log(columns + ' whole width');

      if (this.scrollLeft < 1000) {
        cloneTimelinesleft();
        console.log('test');
        $(this).off('scroll');

      } else if ( (this.scrollLeft + outerContent.outerWidth()) > (columns - 300)){
        innerContent = $('.timeline-container .timeline-years .year-column');
        columns = innerContent.length * 101; // multiply by column width;
        console.log(columns + ' whole width');
        cloneTimelinesright();
      }    
  });

Example starts with scrollbar being center. So it should clone original elements before reaching either side. I'm not sure about the performance, would it be better to just clone and not remove?. Also possibly to clone only to that side that is nearing it's end.

cloneTimeslinesright() is working pretty much as expected I think,

cloneTimelinesleft(); has a problem that once it clones, the position of scroll isnt affected like it is with right side, so condition stays always true and spamming too many clones.

from Never ending scroll, clone items both sides