Never ending scroll, clone items both sides

Question

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.

Answer 1

When you append after (to the right of) a scrollbar position, the scrollbar position doesn't change and extra scroll space becomes available below the current scrollbar position.

When you prepend before (to the left of) a scrollbar position, the existing content gets pushed down and the scrollbar shifts upward.

This is standard browser behavior because from a UX perspective, prepending content to the top signifies a higher degree of importance of information (for instance, a latest update like on your Facebook wall) and it supersedes what's below it, while appending to the bottom signifies an addition of less important content that is superseded by what's above it.

You can override this by manually scrolling to the right, by a width equal to the width of the content you've added, after you do cloneTimelinesleft()

$('body').scrollLeft($(newClonedContent).outerWidth());

Answer 2

I didn't modify your clone function, so while scrolling the width will grow large quickly.

Here's my solution:

(UPDATE: Added left scroll timer to "patch" the left scroll spamming)

var scrollLeftTime = 0;
var scrollLeftWait = 100;
$('.timeline-container').on('scroll', function() {
    var l = $(this).scrollLeft();
    var w = $(this).width();
    var m = $(this)[0].scrollWidth - w;
    console.log(l, m);
    if (l == 0) {
        var t = Date.now();
        if (t - scrollLeftTime > scrollLeftWait) {
            cloneTimelinesleft();
            scrollLeftTime = t;
        }
        $(this).scrollLeft(w);
    }
    if (l == m) {
        cloneTimelinesright();
    }
});

https://jsfiddle.net/2wcutgm7/

An attempt to simplify the process.

I collect the current scrollLeft and the maximum amount of scroll. I then simply test if the position is 0 (clone left) or max (clone right).

It is necessary to bump the scroll position when cloning left or it will just stop.